通知 老版本网站迁移之后,很多地址不可访问

vue 同级组件相互通信

83人浏览 / 0人评论 | 作者:彬  | 分类: 前端  | 标签: vue

作者:彬
链接:http://www.java78.com/article/14.html
声明:请尊重原作者的劳动,如需转载请注明出处


我们知道父子组件通信可以用通过 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来管理组件之间的通信

点赞(0) 打赏

全部评论