vue3之全局变量app.config.globalProperties的使用
·
- 在main.js里面配置config
const app = createApp(App);
app.config.globalProperties.$user = {
name: '梅长苏',
weapons: '长剑',
title: '刺客'
}
- 在template模板中使用
<p>姓名:{{$user.name}} </p>
- 在setup中使用
const cns = getCurrentInstance()
console.log(cns.appContext.config.globalProperties.$user)
// or
const {proxy} = getCurrentInstance()
console.log(proxy.$user)
globalProperties和provide的使用区别
- globalProperties是挂载在vue实例上面的,所以可以直接在template里面访问
- provide/inject 是为vue组件通讯设计的一对方法,需要显示的声明之后才能使用,并且当前组件的provide指向其父组件的provides对象,父级provide会覆盖祖父级的同名参数,具体实现可以参考vue源码. 使用如下:
在app.vue里面注入:
provide() {
return {
call: '我去',
test: '试试就试试'
}
}
在parent.vue里面注入:
provide() {
return {
call: '你好'
}
}
在child.vue里面获取:
inject: ['call' , 'test']
得到: ’你好' '试试就试试'
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)