这篇文章主要讲解了“Vue的provide/inject如何用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue的provide/inject如何用”吧！
简单的可以把provide/inject对比为React的context，都是为了解决跨层级传递属性的不方便而设立的，跟早期的context一样，一开始provide/inject机制也没有载入官方文档，现在虽然已经写了，但仍是语焉不详，这就是我写本文的目的。
Hello World
看一个最简单的例子，从祖辈组件中拿到传入下来的颜色值
UI界面如上，很简单，祖辈组件还提供了一个单选来改变。
<template>
<div>
<label for="red">
红色
<input type="radio" id="red" value="red" v-model="color" />
</label>
<br />
<label for="greed">
绿色
<input type="radio" id="green" value="green" v-model="color" />
</label>
<slot />
</div>
</template>
先看provide，它可以是一个对象，比如
provide: {
color: "green"
}
在孙子组件中可以顺利的取到这个值，但要注意的是这样子的写法是不能返回Vue实例的响应式数据的，当尝试改为
provide: {
color: this.color, //访问不到Vue实例
}
发生错误，提示是Uncaught TypeError: Cannot read property 'color' of undefined 。
一般还是用函数的方式，返回一个传入的对象
provide（） {
return {
color: this.color,
};
}
但是color不是响应式的，就是说如果我在祖辈组件里选择另外一个颜色，在孙子组件里是拿不到更新后的值的，关于非响应式这一点在下一节详细展开。
inject用来指定一个数组或者一个对象，数组的话就放provide里字段的名称，而对象的话可以指定
当前实例中的字段名
对应provide里的字段名
默认值或者返回默认值的函数
const Child = {
inject: {
foo: {
from: 'bar',
default: （） => [1, 2, 3]
}
}
}
不是响应式
这个跟React的context是不同的，React没有响应式机制，一旦改变属性后默认会引发层层的渲染，开发者自己通过shouldComponentUpdate来优化。
官方文档上明确的说了
provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
第一种解决方案是把值转为函数，记得要用箭头函数，不然不能正确获取this
provide（） {
return {
color: （） => {
return this.color;
},
};
}
然后使用时就要变成了函数的调用
<template>
<div :style="{'color':color（）}">传下来的颜色{{color（）}}</div>
</template>
这样子就带来一个很明显的缺点就是由于不是响应式，这个函数将会被调用多次，比如上面模板里有两个color（），可以在函数里打个断点，会发现进来两次。
更好一些的解决方案是把provide所在的Vue实例给传递下去，再来改造一下
provide（） {
return {
color: this,
};
}
在孙组件里获得的其实是实例了，所以要多取一层属性
<template>
<div :style="{'color':color.color}">传下来的颜色{{color.color}}</div>
</template>
可以看到很多UI组件库就是通过这个方式来传递属性的，因为有可能在不确定层级的子组件里要获得祖组件里的值。
感谢各位的阅读，以上就是“Vue的provide/inject如何用”的内容了，经过本文的学习后，相信大家对Vue的provide/inject如何用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
