vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt )

93 阅读 0 评论 62 点赞

我是靠谱客的博主柔弱宝贝，最近开发中收集的这篇文章主要介绍vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt )，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在vue2中的跨组件通信中，我们如果不用状态管理vuex的话，我们就会采用事件总线的通信的方式，但是在vue3中移除了事件总线，我们不能再这么用，所以官方给我们推荐了外部第三方的库来帮我们完成事件总线

mitt : https://github.com/developit/mitt

1.安装地址

npm install --save mitt

2.在vue项目中的utils文件夹，新建一个bus.js

bus.js

import mitt from "mitt";
 
const emitter = mitt()
 
export default emitter

3. 使用，我现在需要使用mitt进行兄弟组件之间的通信实现

search组件

<template>
  <div  @click="removeKey></div>
</template>
 
<script setup>
import emitter from "@/utils/bus";

const removeKey = () =>{
   emitter.emit('clear' ，data)
}
 



</script>

header组件


<template>
  <div ></div>
</template>
 
<script setup>
import { ref ,onBeforeUnmount} from "vue";
import emitter from '../utils/bus'



//接受
emitter.on('clear' ,(data) =>{
  console.log(data);
})
onBeforeUnmount(() => {
  emitter.off('clear')  //关闭
})
 
</script>