vue3之全局变量app.config.globalProperties的使用

1. 在main.js里面配置config

const app = createApp(App);
app.config.globalProperties.$user = {
    name: '梅长苏',
    weapons: '长剑',
    title: '刺客'
}

2. 在template模板中使用

姓名：{{$user.name}} 

3. 在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']
得到： ’你好'     '试试就试试'