1.在写项目的时候,由于组件封装的层次超过了两层,因而想起了用provide和inject传值的方式。provide和inject都是与data、methods、钩子函数同级,千万不要写错!!
基础用法如下:
父组件中:
provide() {
return {
parent: this.parent,
}
},
孙组件中:
provide应该是 一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。
---------------------------------------------------------------------------------------------------------------------------------
项目中实际运用到的地方:
父组件中发起请求,从后端获取到数据,将获取到的数据传递到孙组件中,父组件获取到数据赋值给变量
1.开始写法如下:
父组件中:
** 孙组件中:**
孙组件中打开调试工具,我们可以发现inject和data中定义的变量都是一个空数组,究其原因,就是因为父组件中是异步获取到数据,当数据还没有获取到的时候,就已经通过provide传递到孙组件中,所以此时,我们需要将父组件中获取到的数据进行包装,再传递到孙组件中
2.经过包装之后
父组件中:
父组件异步获取到数据,将数据进行简单的处理。如下:
孙组件中:
此时在孙组件中,我们可以看到调试工具中,provide和inject接受到的是一个函数
使用的时候,直接调用整个函数即可拿到想要的数据
版权归原作者 YPPAH- 所有, 如有侵权,请联系我们删除。