vue3中总线事件的应用(组件间事件传递)

在两个组件关系比较复杂,在使用emit传递事件比较麻烦的情况下,可以使用总线bus来传递事件,具体实现如下:

1.引入插件mitt

bash 复制代码
npm install mitt --save

2.创建一个bus.js,放在你的方法文件中

javascript 复制代码
import mitt from 'mitt'
export const bus= mitt()

3.在触发事件的组件中使用

javascript 复制代码
import { bus} from '../../../utils/bus' 
const emitChangeHistory =()=>{
        bus.emit('changeHistory')
}

const save=()=>{
    ...
     emitChangeHistory() // 触发
}

4.在监控事件的组件中使用

javascript 复制代码
import { bus } from '../utils/bus' 
onMounted(()=>{
  bus.on('changeHistory',()=>{
     // 更新历史版本
     getHistories()
    })
  })
onBeforeUnmount(()=>{
  bus.off('changeHistory')
})

通过以上步骤,就比较容易的实现事件的传递了,尤其在组件的嵌套关系比较复杂时,应用就及其方便了。

相关推荐
Huazzi.4 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉12 分钟前
前端和后端
前端·学习笔记
夫琅禾费米线17 分钟前
leetcode2650. 设计可取消函数 generator和Promise
开发语言·javascript·leetcode·ecmascript
寒雒1 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州1 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂1 小时前
html+js实现图片的放大缩小等比缩放翻转,自动播放切换,顺逆时针旋转
javascript·css·html
Komorebi⁼1 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐1 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX1 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX1 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos