provide的用法

vue中provide和inject依赖注⼊⽤法

provide：Object|()=>Objectinject：Array|{[key:string]:string|Symbol|Object}

provide和inject主要为⾼阶插件/组件库提供⽤例。

并不推荐直接⽤于应⽤程序代码中。是2.2.0版本新增的。这对选项需要⼀起使⽤，以允许⼀个祖先组件向其所有⼦孙后代注⼊⼀个依赖，

不论组件层次有多深，并在起上下游关系成⽴的时间⾥始终⽣效。

provide选项应该是⼀个对象或返回⼀个对象的函数。该对象包含可注⼊其⼦孙的属性。在该对象中你可以使⽤ES2015Symbols作为

key，但是只在原⽣⽀持Symbol和s的环境下可⼯作。

inject选项应该是：⼀个字符串数组，或⼀个对象，对象的key是本地的绑定名，value是：在可⽤的注⼊内容中搜索⽤的key(字符串

或Symbol)，或⼀个对象，该对象的：from属性是在可⽤的注⼊内容中搜索⽤的key(字符串或Symbol)default属性是降级情况下使

⽤的value

使⽤场景：由于vue有$parent属性可以让⼦组件访问⽗组件。但孙组件想要访问祖先组件就⽐较困难。通过provide/inject可以轻松实现

跨级访问祖先组件的数据

⼀种最常见的⽤法是刷新vue组件

如何调⽤：

这样就实现了⼦组件调取reload⽅法就实现了刷新vue组件的功能,个⼈认为它实现了组件跨越组件传递数据⽅法。下⾯⼀个例⼦祖组件的

数据，祖孙元素调取

后代元素引⼊被注⼊数据datas，并在组件内循环输出

实际上，你可以把依赖注⼊看作⼀部分“⼤范围有效的prop”，除了：祖先组件不需要知道哪些后代组件使⽤它提供的属性后代组件不需

要知道被注⼊的属性来⾃哪⾥

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

的。