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

官网: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的使用及组件传值)