vue3组合式api bus总线式通信

news2024/11/17 13:53:36

vue2中可以创建一个 vue 实例，做为总结来完成组件间的通信
但是在vue3中，这种方法是不能使用的。因为vue3中main.js中，使用的createApp() 没有机会再写 new Vue了

但是我们可以使用 mitt 的插件来解决这个问题

vue3 bus组件的用法

安装 mitt

npm install mitt

在这里插入图片描述

封装 mitt

import mitt from "mitt";

const bus = mitt();

export default bus;

组件关系

在这里插入图片描述

父组件

<template>
  <div class="parent">
    我是父组件（这里要使用 eventBus 方式， 使两个子组件进行通信）
    <hr/>
    <son1></son1>
    <hr/>
    <son2></son2>
  </div>
</template>

<script setup>
  import {ref, reactive} from "vue";
  import son1 from "./son1.vue";
  import son2 from "./son2.vue";
</script>

子组件1（接收事件方）中的数据会被子组件2，触发修改

子组件中首先要引入 bus
并且在 onMounted 中使用 on方法，绑定事件名称，及处理事件的函数

<template>
  <div class="son1">
    这是第一个儿子
    大儿子的车牌是 {{carNum}}
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import bus from "@/bus";
let carNum = ref("888888")
onMounted(()=>{
  bus.on("changeCarNum",(number)=>{
    carNum.value = number;
  })
})
</script>

子组件2（发起事件方）

引入 bus
绑定button 的点击事件，并在事件中，通过 bus.emit 触发子组件1的事件

<template>
  <div class="son2">
    这是第二个儿子
    <button @click="changeson1CarNum" type="button">点击二儿子的按钮，使大儿子的车牌变成222222</button>
  </div>
</template>

<script setup>
  import bus from "@/bus";
  const changeson1CarNum = ()=>{
    bus.emit("changeCarNum","222222")
  }
</script>