vue中eventbus用法

百变鹏仔 3个月前 (09-25) #VUE

文章标签 vue

eventbus 是 vue.js 中一种通信机制，允许组件之间进行非父子级通信。用法包括：创建一个全局 eventbus 实例。使用 eventbus.$emit() 触发事件。使用 eventbus.$on() 侦听事件。它的优点包括非父子级通信、松散耦合和可扩展性。

Vue.js 中 EventBus 的用法

EventBus 是 Vue.js 中的一种通信机制，允许组件之间进行非父子级通信。它通过一个中心化的事件总线来传递事件和数据。

安装

EventBus 是一个独立的包，需要先安装：

立即学习“前端免费学习笔记（深入）”；

npm install --save vue-eventbus

用法

在 Vue.js 应用程序中使用 EventBus 非常简单。

1. 创建一个 EventBus 实例

创建一个全局 EventBus 实例，通常在 main.js 文件中：

import Vue from "vue";import VueEventBus from "vue-eventbus";Vue.use(VueEventBus);// 使用 EventBus 的全局实例const eventBus = new VueEventBus();

2. 触发事件

eventBus.$emit("my-event", data);

3. 侦听事件

export default {  mounted() {    eventBus.$on("my-event", (data) =&gt; {      // 处理事件    });  },};

优点

注意事项

文章推荐