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

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

21 vue3 vuex的安装配置_十一月丶萧邦的博客-CSDN博客

26 vue3 Pinia的安装配置_十一月丶萧邦的博客-CSDN博客

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

vue兄弟组件间的通信（事件总线）
一.场景描述导航栏与地图展示区为两个兄弟组件,导航栏组件用到的所有数据都来源于地图区组件通过导航栏按钮切换,控制地图区域数据的变化二.实现步骤 1. 首先两个组件中都引入全局事件总线 import ...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
一.props props不仅可以实现父给子传递信息,还可以进行子给父传递信息 1.父给子传递信息: 父组件中给子组件实例传递信息子组件利用props进行接收组件传递信息(接收方式有三种:数组.对象 ...
16.0 vue3 Teleport---自定义dialog组件
上一篇: 15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇:14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇:vu ...
Vue-非父子组件间的传值
文章目录非父子组件间的传值使用总线方式使用方式完整代码使用vuex方式非父子组件间的传值参考官方文档:https://cn.vuejs.org/v2/guide/migration.ht ...
【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...
React组件——类组件
一.组件的概念使用组件的方式进行编程,可以提高开发效率,提高组件的复用性.提高代码的可维护性和可扩展性 React定义组件的方式有两种类组件:React16.8版本之前几乎React使用的都是类组 ...
vue组件_组件通信_todo案例
今日学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件以前做过一个折叠面板 [外链图片转存失败,源站可能 ...
Day04_vue组件_组件通信_todo案例
Day04_vue组件_组件通信_todo案例文章目录 Day04_vue组件_组件通信_todo案例知识点自测今日学习目标 1. vue组件 1.0_为什么用组件 1.1_vue组件_概念 1 ...
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...

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

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

最新文章

热门文章