七、Vue3基础之七

---

一、Vue3定义全局函数和变量

由于vue3没有Prototype属性，使用app.config.globalProperties代替去定义变量和函数。
Vue2

Vue.prototype.$http => () => {
   }

vue3

const app = createApp({
   })
app.config.globalProperties.$http = () => {
   }

在vue3移除了过滤器，我们可以使用全局函数代替Filters

main.ts

import {
    createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const Mit = mitt()

const app = createApp(App)

declare module 'vue' {
   
    export interface ComponentCustomProperties {
   
        $Bus: typeof Mit
    }
}

app.config.globalProperties.$Bus = Mit

// 自定义一个全局过滤器$filters，里面有一个函数format
type Filter = {
   
    format:(str:string) => string
}
declare module '@vue/runtime-core'{
   
    export interface ComponentCustomProperties{
   
        $filters:Filter
    }
}

app.config.globalProperties.$filters = {
   
    format(str:string):string {
   
        return `'888'.${
     str}`
    }
}
// 自定义全局过滤器结束


app.mount('#app')

App.vue

<template>
    <div>
        <!-- 这里来应用全局过滤器了 -->
        {
   {
   $filters.format('aaa')}}
    </div>
    
</template>

<script setup lang="ts">
import A from './components/A.vue'

</script>

<style lang="scss" scoped>

</style>

二、Vue3插件

在使用createApp()初始化Vue应用程序后，你可以通过use()方法将插件添加到你的应用程序中。
比如element的Message插件，点一下弹出消息框，封装一个全局的插件，在vue的任意组件中都可直接调用。
在src下components下建一个Loading的目录，下面建index.ts和index.vue
index.ts 建插件

import type {
    App, VNode } from 'vue'
import Loading from './index.vue'
import {
    createVNode, render