Vue祖先组件向子孙组件通信（provide / inject）

Vue祖先组件向子孙组件通信（provide / inject）

说明：这对选项需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深（这也是通过props传值不好实现的地方），并在起上下游关系成立的时间里始终生效。

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

demo:

祖先组件：

export default {
  name: "parent",
  data() {
    return {
       name: "Flying bird's blog"
    }
  },
  provide() {
    return {
      provideData: this.name // 祖先组件提供数据
    }
  }
}

子孙组件：

export default {
  name: "child",
  inject: ["provideData"], // 子孙组件接受数据
  created () {
    console.log(this.provideData) // Flying bird's blog
  }
}

 正确使用provide和inject

1. provide/inject是解决组件之间的通信问题的利器，不受层级结构的限制。但也不是随便去滥用，通信代表着耦合。

2.provide/inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

科学上网点我：http://jiasd.us/11667