欢迎光临
我们一直在努力

vue 同级组件相互通信

我们知道父子组件通信可以用通过 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) 打赏
未经允许不得转载:彬的博客 » vue 同级组件相互通信
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏