Vue.js 事件总线示例

事件总线是Vue.js中一种常用的通信方式，用于在组件之间传递数据。下面将通过一个简单的例子来展示如何使用事件总线。

基本用法

首先，创建一个事件总线对象：

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

然后，在任何组件中，你可以使用这个事件总线来监听和触发事件：

// ComponentA.vue
<template>
  <div>
    <button @click="sendEvent">发送事件</button>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendEvent() {
      EventBus.$emit('custom-event', 'Hello from ComponentA!');
    }
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>接收到消息：{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('custom-event', (msg) => {
      this.message = msg;
    });
  }
};
</script>

扩展阅读

更多关于Vue.js的教程和示例，请访问Vue.js 官方文档。

图片示例

Vue.js Logo