Event Bus 兄弟组件传参 ( 不相关的组件之间传值 )

Vue组件间通信

最新推荐文章于 2024-09-09 21:12:30 发布

原创最新推荐文章于 2024-09-09 21:12:30 发布 · 652 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种在Vue项目中实现非父子组件间通信的方法：使用EventBus。通过创建一个全局事件总线，使得不同组件能够互相传递数据，适用于未采用Vuex的状态管理场景。

通常父子之间传值比较方便通过 props 和 $emit 实现

兄弟之间传值无法实现

对于一些没有用到 vuex 的项目就可以使用 Event Bus 来实现

Event Bus 简单使用

首先创建一个 js 文件作为一个载体
引入 vue 新建 Event Bus 并导出
通过 $emit 和 $on 实现页面之间的通信

上代码 ~~~~

1. 新建eventBus.js文件中初始化

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

2. 组件中引入 Event Bus 文件发送事件

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
  // 通过事件发送事件  第二个参数为发送的数据
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

3. 组件中引入 Event Bus 文件接收事件

<!-- B.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  created() {
  // 接收 A 发送的事件
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>