vue 公共事件组件
时间: 2023-11-04 17:06:57 浏览: 46
在Vue中,可以使用事件总线(Event Bus)来实现公共事件组件。事件总线是一个Vue实例,用于在不同组件之间进行通信。
首先,你需要创建一个新的Vue实例作为事件总线:
```
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
```
然后,在需要通信的组件中,你可以使用事件总线来触发和监听事件。
在发送组件中,可以使用`$emit`方法来触发一个事件,并传递数据:
```
// Sender.vue
import { EventBus } from './EventBus';
export default {
methods: {
sendData() {
const data = 'Hello, EventBus!';
EventBus.$emit('custom-event', data);
}
}
}
```
在接收组件中,可以使用`$on`方法来监听事件,并处理接收到的数据:
```
// Receiver.vue
import { EventBus } from './EventBus';
export default {
created() {
EventBus.$on('custom-event', (data) => {
console.log(data); // 输出:Hello, EventBus!
// 处理接收到的数据
});
}
}
```
这样,当发送组件调用`sendData`方法时,接收组件就会监听到`custom-event`事件,并处理接收到的数据。