vue3之全局变量app.config.globalProperties的使用

长征陆

已于 2024-03-16 15:56:14 修改

阅读量1.3k

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-03-16 10:53:24 首次发布

本文链接：https://blog.csdn.net/weixin_52742070/article/details/136757990

版权

本文介绍了如何在Vue应用中定义全局方法$filters，通过app.config.globalProperties设置，然后在shims-vue.d.ts中声明，以便在所有组件中使用。示例展示了如何在组件中导入并调用这个全局函数。

摘要由CSDN通过智能技术生成

1、定义全局方法

//main.ts
//定义全局方法
app.config.globalProperties.$filters = {
    //app.config.globalProperties.+你想添加的属性 $filters 加美元符号主要是为了区分和组件内部的属性
    //全局属性，在里面加东西任何地方都能用
    formatTime() {
      //格式化时间
      return '2021-12-14'
    }
  }

2、在shims-vue.d.ts声明在main.ts中定义的全局方法

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
  //在ComponentCustomProperties里面声明在main.ts定义的全局方法和属性
  interface ComponentCustomProperties {
    //声明全局方法
    $filters: {
      formatTime: () => string;
    }
  }
}

3、在任意组件中使用

// 部分代码
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
    const time =   instance?.appContext.config.globalProperties.$filters.formatTime()
    console.log(time)

4、结果展示