如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
这里是父组件,将getReportData 里的值传到子组件
这里是子组件,先用inject进行接收,然后通过computed传入这边的data,
最后再上面div中进行渲染,这样值就传过来了
小技巧:
如果我们需要传入的组件和值非常多,使用上面的方法时,就需要在每个组件都写这些代码,就会显得非常冗余,那么我们可以新建一个文件,将对数据输出和处理的方法进行封装,然后在页面进行引用。
这样在页面中只需要关心拿到的结果对数据进行渲染。
例:
- 新建一个名为commonDataMixin.js的文件,在里面对数据进行输出和处理
- 直接在子组件页面进行引用,同样可以将值渲染在页面上,这样代码就非常的简洁。