前端 - vue3 - - 挂载全局方法

1、provide、inject

作为全局通信桥梁 也可以全局传输方法 provide接收两个参数 key和value inject接收一个参数 key

provide 和 inject 本身不具有响应式 但可以配合响应式api实现响应式

// 父组件
const num1 = 0
const num2 = ref(0)
const addNum = () => {
  num1 ++
  num2 ++
}
provide('num1',num1)
provide('num2',num2)
provide('addNum')

// 子组件
const addFn = inject('addNum')
addFn()
const myNum1 = inject('num1')
const myNum2 = inject('num2')
cinsole.log(myNum1,myNum2) // 输出0 1

2、config.globalProperties

是vue3提供的一个全局拓展属性 我们可以将需要用到的全局方法挂载到这个属性上 相当于vue2中的define property

// main.ts
const app = create(app)

const myFn = () => {
  console.log('我是全局方法')
}

app.config.globalProperties.$myFn = myFn // 个人习惯 可以去掉$

// index.vue
import {getCurrentInstance} from 'vue'

const {proxy} = getCurrentInstance()! // !处理getCurrentInstance可能为空
const myFn = proxy?.$myFn // 处理proxy可能为空

此时应该会遇到ts的类型校验报错 $myFn不存在ComponentCustomProperties类型中

是因为globalProperties由ComponentCustomProperties接口支撑 我们需要对全局挂载的属性定义类型 在src下新建type文件夹 在文件夹内再建global.d.ts文件（根目录下也可以）

// 实现拓展 不加的话则是覆盖
export {}

declare module 'vue' {
  interface ComponentCustomProperties {
    $myFn: any
  }
}

需要在tsconfig.json中声明识别.d.ts文件

{
  "compilerOptions": {
    "types": ["vite/client"],
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}