文章目录
一、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