系统定制开发vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt / tiny-emitter）-巴掌软件-高性价比的软件定制开发解决方案

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

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的官网上说的这样：

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

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

对全局状态管理比较感兴趣的，可以直接去我的博客中寻找文章：