使用事件总线(eventbus)或自定义事件的问题
2023-02-18 16:30:12 时间
事件总线、自定义事件关键点
- 先监听事件再触发事件
- 考虑组件生命周期顺序
组件通信
<!-- 组件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
相关文章
- FLStudio2023最新中文版水果编曲软件V21
- Flutter混编工程之打通纹理之路
- 说回 TheRouter
- TheRouter 的跨模块依赖注入实现原理
- 什么是相位噪声:相位抖动
- adobe全家桶2023下载正式版全系列
- 忙里偷闲IdleHandler
- kotlin修炼指南8—集合中的高阶函数
- kotlin修炼指南9-Sequence的秘密
- JetBrains 远程开发的使用和心得
- APP动态路由的设计与实践
- 微软发布“Raspberry Robin”恶意软件警告
- 警告:新的攻击活动利用了 MICROSOFT EXCHANGE SERVER 上的一个新的 0-DAY RCE 漏洞
- PLC 中的本地代码执行:使用 RCE 发现 Siemens SIMATIC S7-1200/1500 硬编码加密密钥
- 工业互联网一体化便携式演示实验平台
- 某组态软件工程文件加密机制探究
- [C语言]概述
- 【C语言】指针(野指针)
- 51单片机介绍
- 【C语言】题集 of ①