vue3中使用第三方插件mitt实现任意组件通讯

vue3中使用第三方插件mitt实现任意组件通讯

组件通讯是vue3组合式开发的核心之一,现在我在写代码时,一个组件的代码超过了200行,基本都会拆分组件。组件拆分后,组件之间的通讯就很重要,总结了一下,目前有这么几种组件通讯类型:

  • 父子通讯,这是最常见的通讯方式,父传子子传父,就是父组件向子组件传值,直接使用自定义属性就可以了,父组件中定义属性,子组件中使用defineProps接受父组件传递过来的值,不过需要注意传值响应式的问题;子传父采用自定义事件,在子组件中,使用defineEmits自定义事件,并在执行某个操作时,把这个自定义事件发射出去,同时把想传递的值带上,父组件中使用@自定义事件接收值,并进行相应的操作。父子通讯与vue2并无太大的差异,只是写法不一样而已,个人的博客之前也有记录,参考vue组件之间的数据共享
  • 祖孙组件通讯,使用provide/reject实现,参考vue3使用provide&inject实现祖孙组件通讯,这是一种更复杂的组件传值的方式,比较好用,但是它只适用于上级组件向下级组件传值,不能反过来,我在写vue3时,极少用到
  • 兄弟组件通讯。这是日常开发最常遇到的,尤其是vue3中,一个父组件,然后多个子组件,子组件与子组件之间要通讯,实现起来有很多种方式,我最喜欢用的是pinia/vuex,在vue3中pinia的写法更加简约好用,所以vue3中我几乎放弃了vuex。但是有个问题,pinia作为全局数据共享工具,如果仅实现两个兄弟组件之间的通讯,那么用起来总感觉比较浪费资源。后来学习到了一种更好操作的写法,就是使用mitt第三方插件。在vue2中,mitt是官方的工具,其实就是bus事件总线,vue3移除了,尚不知道是什么原因。这篇博客主要介绍一下怎么使用mitt实现兄弟组件传值

一、安装及封装导出

安装。作为第三方插件,先安装再使用

shell 复制代码
npm i mitt -D

导出

新建个文件mitt.js,填入以下代码,即封装了一个mitt方法

javascript 复制代码
// 第一种是创建一个工具js,不如说mitt.js,哪个组件要用到就引入该文件就好了。
import mitt from 'mitt'
const emitter = mitt()
export default emitter

二、组件A发射指令

组件中引入mitt,并通过事件发射指令

javascript 复制代码
import mitt from '@/utils/mitt'
const emitter = mitt
const mittName = ['showOverall', 'showDriverAge', 'showAge', 'showOffences', 'showHelmetBelt', 'showOccRequire', 'showCumulativeScore']

const btns = ref([
    { title: '总体情况', type: 'warning' },
    { title: '驾龄', type: 'success' },
    { title: '年龄', type: 'success' },
    { title: '违法', type: 'success' },
    { title: '一盔一带', type: 'success' },
    { title: '从业资格', type: 'success' },
    { title: '累计计分', type: 'success' },
])
const chooseTag = i => {
    btns.value.forEach(item => item.type = 'success')
    btns.value[i].type = btns.value[i].type === 'warning' ? 'success' : 'warning'
    emitter.emit(mittName[i])
}

上面的代码挺复杂,业务逻辑是我点击某个按钮,就显示对应的页面,按钮组如下:

每次点击一个按钮,就修改这个按钮的类型,同时发射这个按钮对应的指令名

三、组件B接收指令

组件B作为组件A的兄弟(广义的兄弟,五湖四海皆兄弟的意思)组件,当A发出指令后,它的其他兄弟都可以接收这个指令

javascript 复制代码
<template>
    <Overall v-if="showOverall"></Overall>
    <DriverAge v-if="showDriverAge"></DriverAge>
    <Age v-if="showAge"></Age>
    <Offences v-if="showOffences"></Offences>
    <HelmetBelt v-if="showHelmetBelt"></HelmetBelt>
    <OccRequire v-if="showOccRequire"></OccRequire>
    <CumulativeScore v-if="showCumulativeScore"></CumulativeScore>
</template>

<script setup>
import { ref } from 'vue'
import Overall from './tags/Overall.vue'
import DriverAge from './tags/DriverAge.vue';
import Age from './tags/Age.vue'
import Offences from './tags/Offences.vue'
import HelmetBelt from './tags/HelmetBelt.vue'
import OccRequire from './tags/OccRequire.vue'
import CumulativeScore from './tags/CumulativeScore.vue'

import mitt from '@/utils/mitt'
const emitter = mitt

const showOverall = ref(true)
const showDriverAge = ref(false)
const showAge = ref(false)
const showOffences = ref(false)
const showHelmetBelt = ref(false)
const showOccRequire = ref(false)
const showCumulativeScore = ref(false)

const events = [
    { emitterName: 'showOverall', showState: showOverall },
    { emitterName: 'showDriverAge', showState: showDriverAge },
    { emitterName: 'showAge', showState: showAge },
    { emitterName: 'showOffences', showState: showOffences },
    { emitterName: 'showHelmetBelt', showState: showHelmetBelt },
    { emitterName: 'showOccRequire', showState: showOccRequire },
    { emitterName: 'showCumulativeScore', showState: showCumulativeScore },

]

events.forEach(item => {
    emitter.on(item.emitterName, () => {
        // ChatGPT提供的代码,牛逼
        events.forEach(i => {
            i.showState.value = (i === item);
        });
    })
})



</script>

<style lang="scss" scoped>
.el-header {
    // background-color: #333;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
}
</style>

同样,上面接收指令的代码也挺复杂的,还借助了chatAI的力量才实现的

解释一下吧,就是我在一个页面上写了很多个不同的组件,通过v-if来控制是否显示这个组件,而v-if则是通过组件A的按钮点击事件来确定的

javascript 复制代码
const events = [
    { emitterName: 'showOverall', showState: showOverall },
    { emitterName: 'showDriverAge', showState: showDriverAge },
    { emitterName: 'showAge', showState: showAge },
    { emitterName: 'showOffences', showState: showOffences },
    { emitterName: 'showHelmetBelt', showState: showHelmetBelt },
    { emitterName: 'showOccRequire', showState: showOccRequire },
    { emitterName: 'showCumulativeScore', showState: showCumulativeScore },
]

events是定义的一个事件数组,emitterName是组件A发过来的事件名,showState则是显示状态

javascript 复制代码
events.forEach(item => {
    emitter.on(item.emitterName, () => {
        // ChatGPT提供的代码,牛逼
        events.forEach(i => {
            i.showState.value = (i === item);
        });
    })
})

遍历训练events数组,监听里面的每个指令,当监听到了之后,就把它的showState置为true,只是多了个环节,判断当前的指令和当前点击的按钮是否相同,巧妙的实现了页面的点击响应,主要是能省不少代码。。。

俗事太多,很长一段时间没写代码,甚是怀恋,也不知道自己还能坚持几年🤡

相关推荐
小徐_23331 分钟前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin5 分钟前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_27 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit28 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天33 分钟前
ts中的函数重载
前端
卓伊凡1 小时前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy1 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼1 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍1 小时前
🔹🔹🔹 vue 通信方式 eventBus
前端