vue3使用mitt.js实现各种组件间的通信_Javascript

引言

我们在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组件通信内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！