Vue3 组件之间事件传递(mitt)

组件之间传统的事件传递，两个组件之间要关联，很不好用。在这里我们用到的是mitt。相当把事件放到了一个公共的地方。任何组件直接拿来调用即可。用起来非常方便。

1、先安装mitt  npm i mitt

2、创建/utils/emitter.ts代码如下

//引入mitt
import  mitt from 'mitt'
//调用 mitt 得到emitter,emitter能 绑定事件、触发事件
const emitter=mitt();

// //绑定事件
// emitter.on('test',()=>{
//     console.log('test 被调用了')
// })
// //触发事件
// emitter.emit('test')
// //解绑事件
// emitter.off('test')
// //解绑所有事件
// emitter.all.clear()

//向外暴露emitter
export default emitter

3、创建HelloWorld.vue组件绑定test事件 代码如下

<template>
  <div class="HelloWorld">
    <h1>HelloWorld</h1>
  </div>
</template>

<script setup name="HelloWorld">
//引入emitter.ts
import emitter from '@/utils/emitter.ts'
import { onUnmounted } from 'vue';

//test为事件名, value 是传入的参数,可以添加多个参数
emitter.on('test',(value)=>{
  console.log('组件HelloWorld里面的事件',value)
})
//组件卸载时解绑test事件,从而释放减少对内存的占用
onUnmounted(()=>{
  emitter.off('test')
})
</script>

4、创建TestComponent.vue组件调用HelloWorld.vue里面test事件，代码如下

<template>
    <div class="TestComponent">
        <h1>TestComponent</h1>
    </div>
</template>
 
<script setup name="TestComponent">
import emitter from '@/utils/emitter.ts'
//触发HelloWorld.vue组件绑定test事件
emitter.emit('test', '组件TestComponent传入的参数')
</script>

本文来自www.luofenming.com