Vue Event Bus

问题陈述

我有两个组成部分。我将数据从一个组件传递到另一个组件。接收方应显示接收的数据

创建新的Vue应用程序

要创建新的Vue CLI应用程序，请运行以下命令。确保已安装Vue CLI。

//安装Vue CLI，如果你还没安装它
$ npm install -g @ vue / cli 
//创建Vue App 
$ vue init webpack  
//启动项目
$ npm run dev

创建组件

现在我将创建两个组件。其中一个将是发布者，另一个将是订阅者。名为Leftside.vue和订阅者的发布者的组件是Rightside.vue。

Leftside.vue

Rightside.vue

然后创建home.vue,在引入并使用这些组件。

[email protected]

下一步是将Vue实例创建为事件总线。现在，在您的/src目录中创建一个新文件，命名它eventBus.js。eventBus.js非常简单，我们只需要两行代码

import Vue from 'vue'
export default new Vue()

接下来我们将eventBus.js在我们的组件中使用它

Leftside.vue

Rightside.vue

在每个组件中导入eventBus.js。EventBus用作消息代理的对象。

发布

Leftside.vue

EventBus.$emit(‘DATA_PUBLISHED’, payload) 

该emit()方法用于发布消息。它接收两个参数。第一个是事件名称，第二个是要传递的数据。

订阅

Rightside.vue

EventBus.$on('DATA_PUBLISHED', (payload) => {
  this.updateData(payload)
})

该on()方法用于监听EventBus上接收两个参数的事件。第一个是事件名称，第二个是回调方法。

该DATA_PUBLISHED事件名称用于标识发布者发布和订阅者订阅的事件。

其他

• off()用于删除订阅的事件
• once()用于订阅事件但只触发一次。订阅者触发后，订阅将被删除。