vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt / tiny-emitter）

来源：99网

在vue2中的跨组件通信中，我们如果不用状态管理vuex的话，我们就会采用事件总线的通信的方式，通常做法就是新建一个js文件，例如bus.js，在里面new Vue()，然后export default导出，但是在vue3中移除了事件总线，我们不可以再这么用了，，，但是官方给我们推荐了外部第三方的库来帮我们完成事件总线，官方推荐了两个：或者

用法也很简单：我这里以mitt举例

1. 安装mitt

npm install --save mitt

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

bus.js

import mitt from "mitt";

const emitter = mitt()

export default emitter

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

父组件

<template>
  <child1></child1>
  <child2></child2>
</template>
 
<script setup>
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
</script>

子组件-child1

<template>
  <div>child1
    <button @click="click">给child2 传值</button>
  </div>
 
</template>
 
<script setup>
import emitter from "@/utils/bus"
 
function click() {
  emitter.emit('child2Data', {name: '小米'})
}
</script>

子组件-child2

<template>
  <div>child2---{{ str }}</div>
</template>
 
<script setup>
import emitter from "@/utils/bus"
import {onBeforeUnmount, ref} from "vue";
 
let str = ref()
 
emitter.on('child2Data', data => {
  str.value = data.name
})
 
onBeforeUnmount(() => {
  emitter.off('child2Data')  //关闭
})
</script>

按照vue2的习惯，组件卸载的时候，关闭监听的事件，和vue2的写法上基本保持一致，页面如下

还有监听全部事件写法

emitter.on('*', (type, e) => console.log(type, e) )

清除所有的事件写法

emitter.all.clear()

更多的直接去npm或者github上查阅即可，tiny-emitter的用法与mitt差不多也都是保持一致的，最后说明；就像vue的官网上说的这样：

转载:https:///qq_42543244/article/details/123806588

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

全部频道

vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt / tiny-emitter）