vue3访问全局属性 proxy 和 instance.appContext.config.globalProperties 的差异
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
main.js 中 设置了 app.config.globalProperties.$aaa = AAA 后
在组件中 可以通过 proxy 或 instance.appContext.config.globalProperties 来访问,
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
myAAA = proxy.$aaa
</script>
<script setup>
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const globalProperties = instance.appContext.config.globalProperties;
myAAA = globalProperties.$aaa
</script>
大多数情况下,proxy
和 instance.appContext.config.globalProperties
是可以互换的。proxy 方式更简洁。
proxy
只能在setup
函数内部使用。如果你需要在setup
函数之外访问全局属性,就必须使用instance.appContext.config.globalProperties
。 [例如自定义钩子中访问全局属性]
自定义钩子中访问全局属性
//hooks.js
import { getCurrentInstance } from 'vue';
export function useGlobal() {
const instance = getCurrentInstance();
const globalProperties = instance.appContext.config.globalProperties;
return globalProperties;
}
<!-- HelloWorld.vue -->
<script setup>
import useGlobal from '../hooks/hooks'
const { globalProperties } = useGlobal()
//.....
</script>
<template> </template>
<style scoped> </style>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)