美文网首页
vue中provide/inject的使用及组件传值

vue中provide/inject的使用及组件传值

作者: 刘其瑞 | 来源:发表于2019-10-14 16:05 被阅读0次

    官网:https://cn.vuejs.org/v2/api/#provide-inject
    provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深(普通组件传值只能父子或兄弟关系),并在起上下游关系成立的时间里始终生效。

    provide 选项应该是:一个对象或返回一个对象的函数
    inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名
    
    示例:
    父组件中提供
      provide() {  //重要一步,在父组件中注入一个变量或函数
        return {
         msg: "demo"
          // 提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
        }
      },
    
    子组件中引入
      export default {
        inject: ['msg'],  // 子孙组件中使用inject接住变量即可,可直接在本组件调用或更改父组件传过来的变量
      }
    

    运行顺序:
    1.data
    2.provide
    3.created // 在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组4.件才可以取到inject的值
    5.mounted
    ...

    相关文章

      网友评论

          本文标题:vue中provide/inject的使用及组件传值

          本文链接:https://www.haomeiwen.com/subject/wpiyuctx.html