使用事件总线(eventbus)或自定义事件的问题
事件 问题 使用 自定义 总线 EventBus
2023-06-13 09:15:55 时间
事件总线、自定义事件关键点
- 先监听事件再触发事件
- 考虑组件生命周期顺序
组件通信
<!-- 组件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
相关文章
- IE中输入框绑定input事件触发解析(input事件初始化自动执行问题解决)
- 你根本不懂Javascript(EP5 HTML事件捕获与冒泡)
- JavaScript事件流
- ZooKeeper分布式协调服务(节点分类、事件监听、java集成)
- 第35篇:某区宽带用户路由器DNS被篡改事件分析(DNS重绑定攻击)
- 深入理解Oracle系统事件日志(oracle系统事件日志)
- Oracle 等待事件 sbtgetbuf 官方解释,作用,如何使用及优化方法
- 微软承认Win10 21H1存在事件日志无法访问等问题
- MySQL记录被锁:事件爆发及解决之道(mysql记录被锁)
- 探索Oracle Top事件:深入了解关键性能问题并优化数据库管理(oracle top事件)
- 用JavaScript事件串连执行多个处理过程的方法
- Jsevent事件在IE、FF兼容性问题
- js不完美解决click和dblclick事件冲突问题
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- Ajax局部更新导致JS事件重复触发问题的解决方法
- js的imageonload事件使用遇到的问题