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)

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐