IOS美区账号微信: springsunshine2017

前端技术 · 2020年4月24日 0

vue 兄弟组件之间的通信,最高效的解决方案

兄弟组件之间的通信,应该也是我们前端开发中经常遇到的一个场景。比如我们有一个页面,有待发货和已完成两个页面,待发货页面发货完成后,把该数据更新到已完成页面,这个时候使用兄弟组件的通信就可以解决这个问题。

那么兄弟组件之间的通信有哪几种方式呢?他们又有什么优缺点呢?

首先:通过bus车的方式实现,具体的方案网上一大堆,我就不再赘述。
优点:可以解决我们的问题算吗?哈哈
缺点:需要单独引入一个文件

其次:使用vuex,我们去监听state的值的变化实现兄弟组件的更新
优点:理解方便
缺点:你一定要使用vuex组件

再次:子组件传给父组件,父组件更新兄弟组件。具体实现:
1、父组件定义一个flag标识

2、父组件定义一个更新flag的函数

3、函数传给子组件A,flag传给兄弟组件B

4、A组件数据变更后,通知父组件

5、父组件修改flag

此图像的alt属性为空;文件名为image-5.png

6、子组件监听到flag的变化,然后就可以do everything


优点:不需要借助任何第三方的文件或者插件,方便灵活
缺点:太方便

以上就是博主总结的vue 兄弟组件之间的通信的最优的方案,当然,还会有其他的方案,哈哈