V3-globalProperties定义全局属性｜方法

1.相对简单直接挂代码 + 注释

// main.ts
// 使用app.config.globalProperties.属性集 = 基础数据类型 ｜ 引用数据类型
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$globalData = '全局输出' // 依赖于vue中的 createApp() 方法挂载属性中的 globalProperties
// globalProperties 上挂载实例方法集
app.config.globalProperties.$filters = {
  format<T>(val:T) {
    return '全局对象方法' + val
  }
}
// 定义Filter类型
type Filter = {
  format<T>(str: T): string
}
// 在vue 里进行声明一下新增的属性 ｜ 方法类型
declare module 'vue' {
  export interface ComponentCustomProperties { // 固定写法
    $filters: Filter,
    $globalData: string
  }
}

2.template 中直接使用

// template 中使用
<!-- 全局绑定属性 -->
<h1>{{ $globalData }}</h1>
<!-- 全局$filters上绑定方法 -->
<h1>{{ $filters.format('Lyon') }}</h1>

script 需要先获取组件实例对象中调用

// 组件中使用
import { getCurrentInstance } from 'vue';
const app = getCurrentInstance() // 获取当前组件实例
console.log('全局方法')
const cf = app?.proxy?.$filters.format('js 触发')
console.log(app?.proxy?.$globalData)