1、main.js 设置全局变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { createApp } from 'vue'import App from './App.vue'const app = createApp(App);/** 定义一个函数，用于对象链式取值 */const getObjChainingVal = (obj, keyName) => { // ... return tempObj}app.config.globalProperties.getObjChainingVal = getObjChainingVal;/**定义变量$website，并赋值为devcursor**/app.config.globalProperties.$website = 'devcursor'; |
在其他页面使用的时候
（1）在模板中使用：
1 2 3 4 | <div> 作者：{{ getObjChainingVal(data, 'user.info.name') }} <div>{{ $website }}</div> </div> |
（2）在语法糖里使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { getCurrentInstance } from 'vue'const app = getCurrentInstance()const website = app.appContext.config.globalProperties.$websiteconsole.log(website)// 或者const { proxy } = getCurrentInstance()console.log(proxy.$website)// 使用解构赋值const { $web } = getCurrentInstance()!.appContext.config.globalPropertiesconsole.log($web)/**注意！getCurrentInstance()不能在回调函数、方法里使用**///若要访问全局变量，需在函数外面调用getCurrentInstance()const { proxy } = getCurrentInstance()//或者const name = getCurrentInstance().proxy.$website;const getUserInfo=()=>{ console.log(proxy.$website); console.log(name);} |
（3）组件实例中使用
1 2 3 4 5 | export default { mounted() { console.log(this.$website) // 'devcursor' }} |
2、使用provide定义变量、inject获取变量
（1）父组件使用provide定义变量
1 2 3 4 | import {provide} from "vue";const data='hello Word';provide('data',data); |
（2）子组件通过inject获取变量
1 2 3 4 | import {inject} from "vue";const data=inject('data');console.log(data,'555555555555555555555'); //输出为：hello Word |
附：定义全局函数Vue2 和 Vue3 的区别
由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量
Vue2：
1 2 3 4 5 6 7 8 | // 之前 (Vue 2.x)Vue.prototype.$http = () => {}Vue3：// 之后 (Vue 3.x)const app = createApp({})app.config.globalProperties.$http = () => {}定义一个全局变量，示例如下：app.config.globalProperties.$env = "dev"; |
在 Vue3 移除了过滤器，定义一个全局函数代替 Filters，示例如下：
1 2 3 4 5 | app.config.globalProperties.$filters = { format(str: T): string { return `衔蝉-${str}`; }} |
总结
到此这篇关于Vue3定义全局变量的方式总结的文章就介绍到这了,更多相关Vue3定义全局变量内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
