1. 在main.js里面配置config
const app = createApp(App);
app.config.globalProperties.$user = {
    name: '梅长苏',
    weapons: '长剑',
    title: '刺客'
}
  1. 在template模板中使用
<p>姓名:{{$user.name}} </p>
  1. 在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']
得到: ’你好'     '试试就试试'

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐