在组件的 mounted 生命周期钩子中,向全局事件总线监听 wasteMoney 事件。当 wasteMoney 事件被触发时,会执行事件处理器函数,
时间: 2024-09-29 10:05:11 浏览: 25
vue bus全局事件中心简单Demo详解
在 Vue.js 中,`mounted` 生命周期钩子通常用于初始化组件并绑定到数据及外部资源上。如果你想要在一个组件挂载后监听全局事件总线(如 Vuex store 的 `$store` 或者自定义的 Event Bus),你可以这样做:
```javascript
export default {
name: 'MyComponent',
mounted() {
// 创建一个全局事件总线实例,假设叫做 $eventBus
const eventBus = this.$parent.$store || new Vue();
// 使用 `on` 方法监听 wasteMoney 事件
eventBus.on('wasteMoney', (data) => {
// 这里是事件处理器函数,它会在 wasteMoney 事件触发时执行
console.log(`接收到 wasteMoney 事件的数据: ${data}`);
// 执行你需要的操作,比如更新状态或通知其他组件
});
// 当组件卸载时,可以使用 `off` 来移除这个监听
// this.$destroy() 或 componentWillUnmount 在某些情况下可以考虑在这里移除监听
},
beforeDestroy() {
// 如果有需要,这里可以移除监听
eventBus.off('wasteMoney', this.wasteMoneyHandler);
}
}
```
在这个例子中,`wasteMoney` 事件会被监听,并在其触发时执行处理器函数。
阅读全文