Vue3中的兄弟组件传参与Mitt

兄弟组件传参

在 Vue 3 中，兄弟组件之间传参无法直接进行，需要通过共同的父组件或全局状态管理工具来实现。以下是实现兄弟组件通信的几种常见方法：

方法 1：通过父组件作为桥梁

兄弟组件可以通过父组件传递数据，利用事件 (emit) 和 props 实现通信。

<!--父组件-->
<template>
  <div>
    <SiblingOne @sendData="updateSharedData" />
    <SiblingTwo :data="sharedData" />
  </div>
</template>

<script>
import SiblingOne from './SiblingOne.vue';
import SiblingTwo from './SiblingTwo.vue';

export default {
  components: { SiblingOne, SiblingTwo },
  data() {
    return {
      sharedData: null, // 用于存储兄弟组件之间传递的数据
    };
  },
  methods: {
    updateSharedData(data) {
      this.sharedData = data; // 更新数据
    },
  },
};
</script>

<!--兄弟组件 1 (发送数据)-->
<template>
  <button @click="sendMessage">发送数据</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('sendData', '来自 SiblingOne 的数据');
    },
  },
};
</script>

<!--兄弟组件 2 (接收数据)-->
<template>
  <p>接收到的数据：{{ data }}</p>
</template>

<script>
export default {
  props: ['data'],
};
</script>

方法 2：使用 provide 和 inject

兄弟A组件更改从父组件inject过来的值，导致兄弟B组件inject的值也发生改变。

方法 3：使用Event Bus，具体实现——mitt库

我们在Vue2 可以使用$emit传递，$on监听emit传递过来的事件，这个原理其实是运用了JS设计模式之发布订阅模式，在vue3中$on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用Mitt库。
1.安装

npm install mitt -S

2.main.ts 初始化
全局总线，vue 入口文件 main.js 中挂载全局属性

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const Mit = mitt()
 
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}
 
const app = createApp(App)
 
//Vue3挂载全局API
app.config.globalProperties.$Bus = Mit
 
app.mount('#app')

3.使用方法通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有
A组件派发（emit）

<template>
    <div>
        <h1>我是A</h1>
        <button @click="emit1">emit1</button>
        <button @click="emit2">emit2</button>
    </div>
</template>
 
<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit1 = () => {
    instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {
    instance?.proxy?.$Bus.emit('*****', 500)
}
</script>
 
<style>
</style>

B组件监听（on）

<template>
    <div>
        <h1>我是B</h1>
    </div>
</template>
 
<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-num', (num) => {
    console.log(num,'===========>B')
})
</script>
 
<style>
</style>

监听所有事件（ on(“*”) ）

instance?.proxy?.$Bus.on('*',(type,num)=>{
    console.log(type,num,'===========>B')
})

移除监听事件（off）

const Fn = (num: any) => {
    console.log(num, '===========>B')
}
instance?.proxy?.$Bus.on('on-num',Fn)//listen
instance?.proxy?.$Bus.off('on-num',Fn)//unListen

清空所有监听（clear）

instance?.proxy?.$Bus.all.clear()