vue3定义全局函数和变量

vue2是用Vue.prototype 属性来定义的全局函数和变量，但vue3是没有这个属性的。vue3可以通过app.config.globalProperties 来定义

一、定义属性

1.  
   // main.ts中
2.  
   app.config.globalProperties.$evn= '挂载全局属性'
3.  
    
4.  
   console.log(app.config.globalProperties,'app.config.globalProperties')

运行截图：

 二、定义函数

1.  
   // main.ts
2.  
   type Filter = {
3.  
   format<T>(str: T): string
4.  
   }
5.  
    
6.  
   app.config.globalProperties.$filters = {
7.  
   format<T extends any>(str: T): string {
8.  
   return `'添加过滤'${str}`
9.  
   }
10.  
    }
11.  
     
12.  
    declare module 'vue' {
13.  
    export interface ComponentCustomProperties {
14.  
    $filters: Filter
15.  
    }
16.  
    }

vue项目文件：

1.  
   <template>
2.  
   <div>{{appContext.config.globalProperties.$filters.format(dispalay)}}</div>
3.  
   </template>
4.  
    
5.  
   <script lang="ts" setup>
6.  
   import { reactive, ref, onMounted ,getCurrentInstance, ComponentInternalInstance } from 'vue'
7.  
   const { appContext } = <ComponentInternalInstance>getCurrentInstance()
8.  
    
9.  
   const dispalay = ref('小明')
10.  
    console.log(appContext.config.globalProperties.$evn);
11.  
     
12.  
    </script>

页面显示：

1.  
   // 第二种使用方式
2.  
   import { reactive, ref, onMounted ,getCurrentInstance } from 'vue'
3.  
    
4.  
   const app = getCurrentInstance()
5.  
   console.log(app?.proxy?.$filters.format('js'))
6.  
    
7.  
   // 控制台打印
8.  
   '添加过滤'js

这篇好文章是转载于：学新通技术网