使用事件总线(eventbus)或自定义事件的问题

本文探讨了Vue组件间的通信方法,通过事件总线和自定义事件的关键点,强调了监听事件时机的选择以及组件生命周期顺序。同时介绍了如何在A组件beforeCreate阶段监听事件,在B组件beforeDestroy阶段触发事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

事件总线、自定义事件关键点

  • 先监听事件再触发事件
  • 考虑组件生命周期顺序

组件通信

<!-- 组件A -->
<template>
  <div>
    <button @click="jump">跳转B</button>
    {{msg}}
  </div>
</template>

<!-- 组件B -->
<template>
  <div>
    <button @click="back">返回</button>
  </div>
</template>
// A
jump () {
  this.$router.push('/b')
}

// B
back () {
	this.$router.go(-1)
}
自定义事件
// A
getData (e) {
    this.msg = e.detail.msg
}

beforeCreate () {
	window.addEventListener('cancel', this.getData)
}

destoryed () {
	window.removeEventListener('cancel', this.getData)
}
// B
dispatchEvent () {
	const cancelEvent = new CustomEvent('cancel', {
		detail: {
			msg: '结果'
        }
    })
    window.dispatchEvent(cancelEvent)
    console.log('触发')
}

beforeDestroy () {
	this.dispatchEvent()
}
事件总线
// main.js
window.eventBus = new Vue()
// A
beforeCreate () {
	eventBus.$off('cancel')
	eventBus.$on('cancel', data => {
		this.msg = data
	})
}
// B
beforeDestroy () {
	eventBus.$emit('cancel', {msg: '结果'})
}
  • 生命周期触发顺序
    在这里插入图片描述

要保证监听事件在触发事件之前

A中监听事件可写在 beforeCreate created beforeMount
B中触发事件可写在 beforeDestory destoryed

### Vue事件总线(EventBus)的适用场景及用法 #### 适用场景 Vue事件总线适用于组件之间缺乏直接父子关系但仍需相互通信的情况。具体来说,在兄弟组件、祖孙组件以及完全不相关的组件间传递消息时非常有用[^1]。 #### 创建EventBus实例 为了建立一个全局可用的消息通道,可以在项目中单独定义一个新的JavaScript文件用于导出一个Vue实例作为事件中心: ```javascript // src/event-bus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` 接着在`main.js`里把此实例挂载至Vue原型上以便于在整个应用范围内访问: ```javascript // main.js import { EventBus } from './event-bus'; Vue.prototype.$eventBus = EventBus; ``` 这样做的好处是可以让任何地方都能方便地获取到这个共享的事件总线对象[^2]。 #### 发送与接收事件 当某个操作发生后想要通知其他部分做出响应,则可以利用 `$emit()` 方法来广播自定义事件;而目标位置则通过监听特定名称的事件(`$on()`)来进行相应的处理逻辑[^3]。 ##### 页面A触发事件 假设有一个按钮点击行为需要告知另一页面打开登录对话框: ```html <!-- PageA.vue --> <template> <button @click="triggerLogin">Open Login Dialog</button> </template> <script> export default { methods: { triggerLogin() { this.$eventBus.$emit('callLoginDialog'); } } } </script> ``` ##### 页面B监听并响应 而在负责显示登录界面的地方设置好对应的侦听器即可完成交互闭环: ```html <!-- PageB.vue --> <template> <!-- 登录表单等内容 --> </template> <script> export default { created() { this.$eventBus.$on('callLoginDialog', () => { console.log('Received request to show login dialog.'); // 执行展示模态框其他动作... }); }, beforeDestroy(){ this.$eventBus.$off('callLoginDialog'); // 移除事件监听防止内存泄漏 } } </script> ``` 以上就是基于Vue框架下使用事件总线模式实现不同视图间的松耦合通讯方式的一个简单例子。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值