vue3使用mitt.js实现各种组件间的通信
作者：A-超
在vue工程中,除开vue自带的什么父子间,祖孙间通信,还有一个非常方便的通信方式,类似Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js,可以实现各个组件间的通信,所以本文给大家介绍了vue3使用mitt.js实现组件通信,需要的朋友可以参考下
引言
我们在vue工程中，除开vue自带的什么父子间，祖孙间通信，还有一个非常方便的通信方式，类似Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js。可以实现各个组件间的通信
优点：首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖 Vue 实例，所以可以跨框架使用
1、在项目中引入mitt.js
npm install --save mitt
2、在项目中自定义ts文件引入并暴露mitt.js
我这里是在新建文件夹utils下新建文件命名app-events.ts
//app-events.ts文档 /** * 业务中跨域调用、解决耦合问题 */ import mitt from 'mitt' const AppEvents = mitt() export default AppEvents
3、使用mitt.js
(1)在组件branchAside.vue，传输参数给组件 fileAside.vue （这两个组件可以没任何关系）
在组件branchAside.vue里面mitt.js使用如下：
声明方法和传参数
<script lang="ts" setup>
import AppEvents from '@/utils/app-events' //引入mitt.js
// 调用nameFn方法就可以触发
const nameFn = (item: string='test') => {
// AppEvents.emit('自定义名字', 参数)
AppEvents.emit('sideOpen', item) //使用emit传送方法名字和参数
}
</script>（2）在组件 fileAside.vue里面接受方法和参数：
<script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue' // 引入页面初始化的生命周期和销毁的生命周期
import AppEvents from '@/utils/app-events' // 引入mitt.js
//在页面初始生命周期，通过on监听方法和接受参数
onMounted(() => {
//AppEvents.on('方法名字',(val:any)=>{console.log('接收到的参数-->', val)})
AppEvents.on('sideOpen', (val: any) => {
console.log('mitt---->', val)
})
})
// 页面销毁，通过off注销该自定义命名的方法
onBeforeUnmount(() => {
AppEvents.off('sideOpen')
})
</script>拓展知识：vue3中mitt.js使用方法
由于在vue3.0中移除了vue实例的$on(), $off()方法，所以，在vue3.0取而代之的是用mitt.js第三方库来实现平行组件间的通信，其特点是小巧，轻量。
在vue2中我们通过事件总线eventBus,来实现两个平行组件之间的通信：
bus.js
import Vue from 'vue' // 创建vue实例 const Bus = new Vue() export default Bus
在具体的组件中：
A.vue
import Bus from './bus.js'
// 发布一个事件
Bus.$emit('sendData', {name: 'Jack',age: 20})
B.vue
import Bus from './bus.js'
// 订阅一个事件
Bus.on('sendData', (param) => {
console.log(param)
})
main.js vue入口文件, 或者直接将bus实例挂在在vue的原型上：
import Vue from 'vue' const Bus = new Vue() Vue.prototype.$Bus = Bus
那么，在vue3我们也可以通过mitt.js来实现两个平行组件之间的通信
首先安装：npm install --save mitt在项目src目录下新建一个
mitt.js
文件
import mitt from 'mitt' // 创建mitt实例 const emitter = mitt() // 导出 export default emitter
在具体的组件实例中：
A.vue
import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.emit('sendData', {name: 'David', 'age': 20})
B.vue
import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.on('sendData', (param) => {
console.log(param)
})
// main.js import emitter from '@/mitt.js' app.config.globalProperties.$emitter = emitter
那么在vue3 setup 语法中：
const { getCurrentInstance } from 'vue'
const proxy = getCurrentInstance() // 返回vue的实例
proxy.$emitter.on('foo', e => console.log(e)) // 订阅事件
proxy.$emitter.emit('foo', {a: b}) // 发布事件
到此这篇关于vue3使用mitt.js实现各种组件间的通信的文章就介绍到这了,更多相关vue3 mitt.js组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！