vue3:兄弟组件,跨组件传值,事件总线的通信方式(mitt / tiny-emitter)
2023-09-11 14:22:28 时间
在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博客
相关文章
- Vue笔记:Vue3配置axios跨域
- vue3:子组件向父组件发送数据(vue@3.2.26)
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- 基于vue3的京东nutui组件库的表单校验规则:怎样进行表单验证?怎样只使用指定的某一个规则进行校验呢?
- vue3中 toRefs和 toRef 的区别
- Vue3中的组件通信方式
- Vue3 对比Vue2,你找到哪些变化?
- vue3 ref 和reactive的区别
- Vue2和Vue3的区别和变化
- Vue3 defineProp传参以及defineEmits事件传递详细解释
- Vue3 生命周期引入与less内置编译器安装与使用