上面这段话出自官方,内容也比较好理解,就是通常数据传递一层,我们使用prop就可以很好的解决,如果传递多层,再使用prop就不是很好的方案,这时需要provide和inject
1 provide
在 provide 中指定要传递给子孙组件的数据。
provide: { data: '给子孙的数据' },
复制
如果我们尝试提供一些组件实例 property
data() { return { data:"给子孙的数据" } }, provide() { return { data: this.data } },
复制
2 inject
子孙组件通过inject注入祖父组件传递过来的数据。
data() { return {} }, inject: ['data'],
复制
可以看出是个数组,所以里面可以注入多个,另一种方式就是直接一个变量接
const data= inject('data')
复制
3 总结
官方其实不推荐在应用程序代码中直接使用,因为数据追踪比较困难,不知道那一层级声明了 provide 又或是哪些层级使用了 inject 。造成比较大的维护成本。因此,除组件库或高阶插件外,Vue建议用Vuex解决或其他办法处理。