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')
})

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

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js