Vue3定义全局属性和方法并在组件中使用，解决组建中报错的问题

朱雀 2023-10-10 20:13 5阅读 0赞

![571fd6190f7a49f88db152cee280c476.png][]定义全局属性和方法需要在main.ts中定义：例如这里定义一个变量env和一个函数filter

// 定义全局变量和全局函数
    app.config.globalProperties.env = "dev"
    
    app.config.globalProperties.filter = {
      format<T>(content:T){
        return "格式化后的内容" + content
      }
    }

然后在Vue组件![7ba36a6ac5e24997ac87b7d785f82c2a.png][]

虽然页面上有正常渲染，但是模板里面缺报错：![18c1581983644432ab7a4aca163444cf.png][] 报错的原因是找不到属性env，那就需要在main.ts中声明一下这个变量和函数

![3abb16e73ef0438a890a885f30ddb283.png][]

解决变量和函数找不到的报错

在main.ts中声明一下：

import './assets/main.css'
    
    import { createApp } from 'vue'
    import { createPinia } from 'pinia'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'
    import router from './router'
    
    const app = createApp(App)
    
    app.use(createPinia())
    app.use(router)
    
    app.use(ElementPlus)
    // 定义全局变量和全局函数
    app.config.globalProperties.env = "dev"
    
    app.config.globalProperties.filter = {
      format<T>(content:T){
        return "格式化后的内容" + content
      }
    }
    
    // 解决Vue中的全局变量和函数报错问题
    interface Filter {
      format<T>(content:T):string
    }
    declare module 'vue' {
      export interface ComponentCustomProperties {
        filter: Filter,
        env:string
      }
    }
    
    
    
    app.mount('#app')

保存后，再回到Vue文件中，就不报错了：![349a546584a8410aa098f29b00e36bd1.png][]

[571fd6190f7a49f88db152cee280c476.png]: https://img-blog.csdnimg.cn/571fd6190f7a49f88db152cee280c476.png
[7ba36a6ac5e24997ac87b7d785f82c2a.png]: https://img-blog.csdnimg.cn/7ba36a6ac5e24997ac87b7d785f82c2a.png
[18c1581983644432ab7a4aca163444cf.png]: https://img-blog.csdnimg.cn/18c1581983644432ab7a4aca163444cf.png
[3abb16e73ef0438a890a885f30ddb283.png]: https://img-blog.csdnimg.cn/3abb16e73ef0438a890a885f30ddb283.png
[349a546584a8410aa098f29b00e36bd1.png]: https://img-blog.csdnimg.cn/349a546584a8410aa098f29b00e36bd1.png