vue 同级组件相互通信

/ 2020-08-01 / 926人浏览 / 0人评论

我们知道父子组件通信可以用通过 props 或者事件订阅&发布来进行通信;

父节点也可以通过声明ref属性,直接去调用。

那么同级组件怎么调用呢?

已知的事情是,两个同级组件是无法像父子组件那样去调用。

那么下面提供两个方法去实现同级组件调用:

1.搭建中间桥梁“中转战”

定义一个中间文件 eventBus.js 【也是目前网上通用做法】;创建一个空的vue实例,作为同级组件通信的桥梁。

import Vue from 'vue'
export default new Vue()

将中间件,引入到同级组件中

import bus from '../eventBus.js'

组件一中,通过$emit将事件和参数传递给组件二

testEvent(msg){
          bus.$emit('testEvent',msg) 
} 

组件二中,通过$on接收接收参数和相应事件

bus.$on("testEvent", (msg) => {
      this.msg = msg;
});

2. 一般大型的项目,推荐使用Vuex来管理组件之间的通信

全部评论