vue3 事件总线mitt 非父子组件间通信

最新推荐文章于 2024-09-04 14:17:28 发布

小人参Y

最新推荐文章于 2024-09-04 14:17:28 发布

阅读量289

点赞数 3

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48235660/article/details/136209738

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue3中移除原生事件总线后，如何通过第三方库mitt实现组件间的发布订阅通信，以及如何在项目中安装和使用它进行简单的非父子组件交互。

摘要由CSDN通过智能技术生成

概述

（1）vue2的事件总线event bus到vue3就被移除了，vue3需要通过第三方库mitt实现此通信

（2）采用发布订阅模式，可以一对多发送消息，只要监听了事件都可以获得对应消息；例如A组件发布了消息，那么想要获取这个消息的组件可以是很多个，只要监听了就能获取到

（3）适用于简单的非父子关系组件的通信，例如兄弟组件，复杂场景建议使用vuex

安装

npm install mitt -s

使用

（1）通常在项目的utils文件夹中新建一个js文件，例如utils/eventBus.js

（2）分发方

<template>
    <div>
        <h1>分发方</h1>
        <button @click="sending">点我分发数据</button>
    </div>
</template>
<script setup>
import Bus from '../../utils/eventBus'
// 接收消息方法
const sending = () => {
    // 分发数据出去
    Bus.emit('sendMsg', '这是要发送的数据')
}
</script>

（3）接收方

<template>
    <h1 style="margin-top: 50px;">接收方</h1>
</template>
<script setup>
import { onMounted } from 'vue';
import Bus from '../../utils/eventBus'

onMounted(() => {
    receive()
})

// 接收消息方法
const receive = () => {
    // 监听sendMsg传递过来的数据并做处理
    Bus.on('sendMsg', (res) => {
        console.log('res', res);
    })
}
</script>

（4）测试文件

<template>
    <div>
        <child-one></child-one>
        <child-two></child-two>
    </div>
</template>
<script setup>
import ChildOne from './childOne.vue'
import ChildTwo from './childTwo.vue'
</script>

（5）测试结果

于是点击分发组件按钮，触发分发事件；那么接收方组件，监听获取事件的方法体，会打印出获取到的数据