vue3 mitt使用

Vue3 mitt使用

一、解决方案

在Vue3项目中，当遇到组件间通信特别是非父子组件通信时，mitt是一个非常轻量且实用的事件总线工具。它可以帮助我们轻松地在不同组件之间传递消息和数据，而不需要层层传递props或者使用复杂的Vuex状态管理。

二、安装与基本使用

1. 安装mitt

需要安装mitt库，在终端输入以下命令：

bash npm install mitt

2. 创建事件总线

在项目src目录下创建一个bus.js文件：

javascript import mitt from 'mitt' const bus = mitt() export default bus

3. 使用事件总线

(1) 发送事件

在发送方组件中：

vue

  <button>发送消息</button>
</p>


import bus from './bus'
function sendMessage() {
    bus.emit('my-event', {message: '你好'})
}


<p>

(2) 接收事件

在接收方组件中：

vue

  <div>{{ message }}</div>
</p>


import { ref, onMounted, onUnmounted } from 'vue'
import bus from './bus'

let message = ref('')
onMounted(() => {
    bus.on('my-event', ({ message }) => {
        message.value = message
    })
})
onUnmounted(() => {
    bus.all.clear() // 组件卸载时清除监听
})


<p>

三、其他思路

1. 使用provide/inject方式

对于祖孙组件通信，可以考虑使用Vue3提供的provide/inject功能。父组件通过provide提供数据，子组件或孙子组件通过inject获取数据。

vue
// 父组件</p>


import { provide, ref } from 'vue'
let message = ref('来自父组件的消息')
provide('msg', message)


<p>// 子组件或孙子组件</p>


import { inject } from 'vue'
const message = inject('msg')


<p>