在Vue中使用provide和inject

.grandPa{width:600px;height:100px;line-height:100px;border:2pxsolid#7fffd4;padding:010px;text-align:center;margin:50pxauto;strong{字体大小：20px;text-decoration:underline;;}.blue{color:blue;}}，相信大家在工作中一定遇到过多层嵌套的组件，而Vue中组件数据通信的方式有很多种。比如vuex，$parent和$children，prop，$emit和$on，$attrs和$lisenters，eventBus，ref。今天主要跟大家分享的是provide和inject。很多人会问，我为什么不直接用vuex呢？Vuex当然好！但是，有可能项目本身并不需要使用vuex。这时候provide和inject就要登场了。我们开发的时候，如果有什么帮助的话，官方的解释应该是provide选项应该是一个对象或者是一个返回对象的函数。该对象包含可以注入其后代的属性。inject可以是字符串数组或对象。说白了就是在祖先组件中注入provide，在需要用到的地方引入inject即可。我们可以把依赖注入看作是一个大型prop的一部分，但它有以下特点：祖先组件不需要知道哪些后代组件使用它提供的属性。后代组件不需要知道注入的属性来自哪里。注意：provide和inject是绑定的，当然不是响应式的。这是故意的。但是，如果你传入一个可监听的对象，这个对象的属性仍然是响应式的。实例目录结构祖先index.vue.grandPa{width:600px;height:100px;line-height:100px;border:2pxsolid#7fffd4;padding:010px;text-align:center;margin:50pxauto;strong{字体大小：20px;text-decoration:underline;;}.blue{color:blue;}}复制代码中间组件parent.vue.parent{height:100px;line-height:100px;border:2pxsolid#feafef;padding:010px;margin-top:20px;strong{font-size:20px;text-decoration:underline;;}}复制代码后代组件son.vue<script>exportdefault{name:'ProvideSon',//注入以获取值inject:['nameObj','age','cityFn'],computed:{city(){returnthis.cityFn()}}}.son{height:100px;行高：100px；填充：010px；边距：20px；border:1pxsolid#49e2af;strong{字体大小:20px;text-decoration:underline;;}.blue{color:blue;}}复制代码来看看运行结果图1：【更改名称】按钮没有被点击，原始状态图2：已点击【更改名称】按钮，可以比较更新后的状态。会发现一个小细节。不管我点击多少次，孙子组件的年龄字段永远是12，不会改变。就是官网提到的provide和injectbindings没有响应。这是故意的。所以大家在使用的时候一定要注意注入的方式，否则很有可能实现不了数据响应。希望今天的分享能对大家有所帮助~最近《如何优雅地使用VUE？》必知的VUE实战技巧谷歌技术面试全录