vue3中globalProperties的使用及ts类型定义

前言

vue3中globalProperties的使用及ts类型定义

在vue3中,新的组合式API中没有this,因为vue3用Typescript重写。this不再指向vue的实例本身。如果要定义一个全局使用的变量或方法。可以使用globalProperties。使用如下：

1.main.ts

代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import useModel, { optionProp } from './hooks/useModal'
// 自定义类型申明
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $sum: (a: number, b: number) => number
    $showModel: (option: optionProp) => void
  }
}
const app = createApp(App)
app.config.globalProperties.$showModel = useModel
app.config.globalProperties.$sum = (a: number, b: number) => a + b
app.use(router)
app.use(store)
app.mount('#app')

2.组建中使用 test.ts

代码如下：

    // 全局变量的使用
    const { proxy } = getCurrentInstance() as ComponentInternalInstance
    const sumValue = proxy?.$sum(1, 2)
    console.log(sumValue)
    // 点击触发对话框
    const show = () => {
      proxy?.$showModel({
        title: '测试',
        content: '你确定要删除吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: res => {
          if (res.confirm) {
            console.log('确认')
          } else {
            console.log('取消')
          }
        }
      })
    }

---

总结

上面的declare module ‘@vue/runtime-core’ 是对ComponentCustomProperties 的一个补充说明，ts的精髓在于它的类型约束，这样可以在其它组建中使用自定义属性时可以获得类型提示和类型的约束。