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,代码:
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
————————————————
版权声明:本文为CSDN博主「Jay丶千珏」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_42543244/article/details/123806588
本文来自博客园,作者:RHCHIK,转载请注明原文链接:https://www.cnblogs.com/suihung/p/16874637.html