最近工作中遇到朋友问我Vue同级兄弟组件怎么传递数据和接收数据,平时大量用到的都是父组件和子组件传递数据,于是查了一下资料,自己写了个简单的Deom,算是了解学习了这个知识点。
1、用到的文件说明:
demo.vue、eventBus.js、first.vue、second.vue
文件关系说明:first.vue、second.vue作为组件放到demo.vue中,first.vue、second.vue是两个平级兄弟页面作为组件嵌入到demo.vue中,下文有说明。
1.1、功能点如图所示:
ps:当点击组件一的按钮,把数据传送给组件二,组件二接收到内容后,把红色文字替换掉
2、同级组件不能直接传值,需要一个中间桥梁,这里我们定义个中间桥梁js文件,命名为eventBus.js
2.1、代码如下:
2.2、demo.vue 页面代码如下
demo.vue 主要是引入了first.vue 与 second.vue 两个页面当做组件。
2.3、first.vue 页面代码如下
引入 eventBus.js,$emit触发方法 【userDefinedEvent】,这个方法是自定义的,组件二接收的时候也用这个方法即可。
2.4、second.vue 页面代码如下
引入 eventBus.js,$on接收 【userDefinedEvent】方法传过来的回调参数。
点击按钮,页面效果如下
红色文字已经修改成我们传递过来的值。
一般大型的项目,推荐使用Vuex来管理组件之间的通信