自定义全局函数 createApp

Vue3 可以通过全局 API 进行自定义函数，比如 Vue2 中的过滤器已经在 Vue3 中移除了，可以通过自定义全局函数添加。

config.globalPropertie 取代了 Vue2 中 Vue.prototype 。

实现

//main.ts
import {createApp} from 'vue'
import App from './App.vue'

let app=createApp(App)

type Filter={
    format<T>(str:T)=>string
}

//虽然功能已经好了，但由于没有类型限制，会 ts 警告，需要给它定义泛型
//注意：@vue/runtime-core 通常放在 main.ts 中使用因为引入了 vue 
//若是在 d.ts 文件中就需要加入 export {} 哪怕只是暴露一个空的对象
declare module '@vue/runtime-cor/'{
	export interface ComponentCustomProperties={
		$filter:Filter
    }
}

app.config.globalProperties.$filter={
    format<T>(str:T):string{
        return `这是${str}`
	}
}

使用

//App.vue
<template>
	<div>
        {{$filter.format('App.vue组件')}}
    </div>
</template>

<script setup lang='ts'>
    
</script>