vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3使用event bus(事件总线)

在Vue3中使用event bus(事件总线)的步骤详解

作者:码喽的自我修养

在Vue 3中,可以通过创建一个事件总线(event bus)来实现组件之间的通信,要在Vue 3中使用事件总线,主要步骤有:1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线,以下是详细的步骤和示例,需要的朋友可以参考下

一、创建事件总线

在Vue 3中,创建事件总线的方式与Vue 2有所不同。Vue 3不再直接使用Vue实例作为事件总线,而是使用一个空的对象或使用 mitt 库。下面是如何创建一个简单的事件总线:

// bus.js
 
import mitt from 'mitt';
 
 
const emitter = mitt();
 
 
export default emitter;

二、在组件中使用事件总线

创建好事件总线后,可以在组件中引入并使用它来触发和监听事件。以下是如何在两个组件中使用事件总线进行通信的示例:

1、在发送事件的组件中

// SenderComponent.vue
 
<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from './bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      emitter.emit('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>
 

三、详细解释

1、为什么使用事件总线

事件总线是一种轻量级的解决方案,用于在Vue组件之间进行通信,尤其是在没有直接父子关系的组件之间。它的主要优势包括:

2、使用mitt库的优势

在Vue 3中,推荐使用 mitt 库来创建事件总线,因为它更轻量、性能更好,而且与Vue 3的Composition API兼容。mitt库的主要优点包括:

3、Vue 3中事件总线的替代方案

四、实例说明

以下是一个完整的实例,展示了如何使用事件总线在两个没有直接关系的组件之间进行通信。

1、创建一个新的Vue项目

首先,创建一个新的Vue 3项目:

npm init vue@latest

按照提示创建项目后,安装 mitt 库:

npm install mitt

2、创建事件总线

在项目根目录下创建一个 bus.js 文件,并添加如下代码:

import mitt from 'mitt';
 
const emitter = mitt();
 
export default emitter;

3、发送事件的组件

在 src/components 目录下创建一个 SenderComponent.vue 文件,并添加如下代码:

<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from '../bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      emitter.emit('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>

4、接收事件的组件

在 src/components 目录下创建一个 ReceiverComponent.vue 文件,并添加如下代码:

<template>
  <div>
    <p>Received Message: {{ message }}</p>
  </div>
</template>
 
<script>
import emitter from '../bus';
export default {
  data() {
    return {
      message: ''
    }
  },
 
  mounted() {
    emitter.on('message', (msg) => {
      this.message = msg;
    });
  },
 
  beforeUnmount() {
    emitter.off('message');
  }
}
 
</script>
 

5、在主应用中使用组件

 src/App.vue 文件中,添加如下代码:

<template>
  <div id="app">
    <SenderComponent />
    <ReceiverComponent />
  </div>
</template>
 
<script>
 
import SenderComponent from './components/SenderComponent.vue';
import ReceiverComponent from './components/ReceiverComponent.vue';
export default {
  components: {
    SenderComponent,
    ReceiverComponent
  }
}
 
</script>
 

到此这篇关于在Vue3中使用event bus(事件总线)的步骤详解的文章就介绍到这了,更多相关Vue3使用event bus(事件总线)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文