vue学习——provide和inject
转载来自:https://zhuanlan.zhihu.com/p/140824875
栗子
父组件 index.vue
<template> <!-- 父组件 --> <div class="views__home"> <my-children></my-children> </div> </template> <script> import MyChildren from './my-children.vue'; // 子组件 export default { components: { MyChildren }, provide() { return { student: { name: 'xiaoming' } }; }, mounted() { console.log(this.student); // undefined } }; </script>
子组件 my-children.vue
<template> <!-- 子组件 --> <div class="views__home__my-children"> <my-grandson></my-grandson> </div> </template> <script> import MyGrandson from './my-grandson.vue'; // 孙组件 export default { components: { MyGrandson } }; </script>
孙组件 my-grandson.vue
<template> <!-- 孙组件 --> <div class="views__home__my-grandson"></div> </template> <script> export default { inject: ['student'], mounted() { console.log(this.student); // { name : 'xiaoming' } } }; </script>
可以看出来 my-grandson组件可以直接获取到 index组件传过来的变量,中间不在需要经过 my-children组件
转载来自:https://blog.csdn.net/weixin_43459866/article/details/114691818
处理响应性
Vue中, Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的(设计如此)。
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的
以上引用自官网
可能之所以这样设计,是为了避免数据的混乱。就如同props不能被子组件直接修改一样。
从代码角度讲
data() { return { foo: 'foo', bar: 'bar' baz: {hello: 'world'} } }, provide() { return { foo: this.foo, bar: this.bar, } },
当我们以如上的形式书写代码的时候,其实相当于对this.foo和this.baz做了一层浅拷贝,固当子组件inject的时候已经丢失了响应式功能了。但由于仅仅是浅拷贝,所以响应式对象的属性仍旧是响应式的。
// 父组件 provide() { return { baz: this.baz, } }, // 子组件baz.hello仍旧是响应式的。 inject: ['baz']
依照这个思路,如果我们希望整个数据都是响应式的。那么可以通过一下的方法实现:
// 父组件: { provide() { return { reactiveMsg: () => this.msg } }, } // 子组件: { inject: ['reactiveMsg'], computed: { computedProperty() { return this.reactiveMsg() } }, watch: { computedProperty() { console.log('数据改变') } } }
如上provide提供一个函数。函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。
而且这样做有一个好处,即无法直接修改computedProperty的值,因为他是一个计算属性。这样就可以避免数据的混乱。