vue3+ts 中使用mitt进行兄弟组件之间传值

本文主要是介绍vue3+ts 中使用mitt进行兄弟组件之间传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装mitt

npm install --save mitt

2、utils下面新建emitter.ts文件

代码：

import mitt from 'mitt'const emitter = mitt()export default emitter

3、使用，A和B互为兄弟组件,B要获取A的数据

A组件：

先引入

import emitter from '@/utils/emitter'

使用 emit 发送数据

const handleSearch = () => {emitter.emit('handleCondition', {dateValue: dateValue.value,dateValueLast: dateValueLast.value,currencyValue: currencyValue.value,})
}

B组件接收

同样先引入

import emitter from '@/utils/emitter'

使用on接收
 

const getSearchCondition = () => {emitter.on('handleCondition', (val: any) => {dateValue.value = val.dateValuedateValueLast.value = val.dateValueLastgetInitData()})
}

这篇关于vue3+ts 中使用mitt进行兄弟组件之间传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---