Vue中使用provide和inject

相信大家在工作中一定遇到过多层嵌套组件，而vue 的组件数据通信方式又有很多种。

比如vuex、$parent与$children、prop、$emit与$on、$attrs与$lisenters、eventBus、ref。

今天主要为大家分享的是provide和inject。

很多人会问，那我直接使用vuex不就行了吗？

vuex固然是好！

但是，有可能项目本身并没有使用vuex的必要，这个时候provide和inject就闪亮登场啦～

使我们开发的时候，如有神助～

官方解释

provide

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

inject

可以是一个字符串数组、也可以是一个对象

说白了，就是provide在祖先组件中注入，inject 在需要使用的地方引入即可。

我们可以把依赖注入看做一部分大范围的prop，只不过它以下特点：

• 祖先组件不需要知道哪些后代组件使用它提供的属性
• 后代组件不需要知道被注入的属性是来自那里

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

实例

目录结构

祖先

index.vue

复制代码

中间组件

parent.vue

复制代码

后代组件

son.vue

复制代码

我们来看一下运行结果。

图一：未点击【改变名称】按钮，原有状态

图二：已经点击【改变名称】按钮，更新后状态

大家可以对比一下前后差异。

会发现一个小细节。

无论我点击多少次，孙子组件的年龄age字段永远都是12并不会发生变化。

正是官网所提到的provide 和 inject 绑定并不是可响应的。这是刻意为之的。

所以大家使用的时候，一定要注意注入的方式，不然很可能无法实现数据响应。

希望今天的分享对你能有所帮助～

近期

「 如何优雅的使用VUE? 」不可不知的VUE实战技巧Google

技术面试全记录