我们知道父子组件通信可以用通过 props 或者事件订阅&发布来进行通信;
父节点也可以通过声明ref属性,直接去调用。
那么同级组件怎么调用呢?
已知的事情是,两个同级组件是无法像父子组件那样去调用。
那么下面提供两个方法去实现同级组件调用:
定义一个中间文件 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;
});
全部评论