mitt

<template>

  <A></A>

  <B></B>

  </template>

 

  <script setup lang='ts'>

  import A from './A.vue'

  import B from './B.vue'

 

  // 兄弟组件之间的通信在Vue3中没有bus，通过插件mitt来完成兄弟之间的沟通

  </script>

 

  <style scoped lang='scss'>

 

  </style>

 

<template>

<div @click="emit">传过去B</div>

</template>

<script setup lang='ts'>

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance();

// 发送信息

const emit = () => {

  console.log("%c Line:10 🍿", "color:#ffdd4d");

    instance?.proxy?.$Bus?.emit('getMsg', 'hello world')

}

</script>

<style scoped lang='scss'>

</style>

 

<template>

<div>A传来的信息</div>

</template>

<script setup lang='ts'>

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance();

// 接受信息

// instance?.proxy?.$Bus?.on('getMsg', (msg: string) => {

//     console.log('A接收到B传来的信息', msg)

// })

// * 代表监听所有事件，type为事件名称

// instance?.proxy?.$Bus?.on('*', (type, msg: string) => {

//     console.log('A接收到B传来的信息',type, msg)

// })

const bus = (str: any) => {

  console.log('A接收到B传来的信息', str);

 

}

instance?.proxy?.$Bus?.on('getMsg', bus)

instance?.proxy?.$Bus?.off('getMsg', bus) // 取消监听

instance?.proxy?.$Bus.all.clear() // 取消全部监听

</script>

<style scoped lang='scss'>

</style>