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

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

 npm地址：mitt - npm 或者 tiny-emitter - npm

用法也很简单：我这里以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的官网上说的这样：

在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。根据具体情况来看，有多种事件总线的替代方案：

• Prop 和事件应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
• Provide 和 inject 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
• provide/inject 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”，即 prop 需要通过许多层级的组件传递下去，但这些组件本身可能并不需要那些 prop。
• Prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop，那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容，因此 prop 可以被直接传递而不需要中间组件的参与。
• 全局状态管理，比如 Vuex

转载:https://blog.csdn.net/qq_42543244/article/details/123806588