inject 响应式_【Vue】provide/inject实现组件通信及响应式数据更新

一、provide/inject实现组件通信

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是：一个字符串数组，或一个对象

provide/inject是Vue.js2.2.0版本后新增的API：

provide：Object | () =>Object//一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：Array | { [key: string]: string | Symbol | Object }//一个字符串数组，或一个对象

虽然官方文档说，provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，但是在插件 / 组件库(比如 iView，事实上 iView 的很多组件都在用)。不过建议归建议，如果你用好了，这个 API 会非常有用。

这对选项需要一起使用，以允许一个祖先组件向其所有的子孙后代注入一个依赖，不论组件的层次有多深，并在起上下游关系成立的时间里始终生效。

注意：provide和inject绑定并不是可响应的。这显然不是设计的失误，而是刻意的。

下面我们来看一看它最简单的用法：

//祖先级组件(上级组件)

exportdefault{

data(){return{

}

},

provide:{

foo:'test'},

components:{

Pro,

}

<