vue3 组件通信 --- 兄弟通信

该文章讲解的是兄弟组件的通信方式，使用到了第三方包 mitt。

1. 安装 mitt

npmjs.com -> search mitt -> look

npm install --save mitt

2. 使用

首先在项目中新建一个文件，我在这里取名为 bus.js

import mitt from 'mitt'

export default mitt()

3. 开始兄弟组件通信

mitt 中的 on() 方法监听事件，也就是接收方；emit() 方法发送事件，也就是发送方。
on() 的第一个参数是自定义事件类型（事件名称），第二个参数是回调函数接收发送过来的数据，emit() 的第一个参数同上，第二个参数是要传递的数

App.vue

<script setup>
import Comp1 from './views/Child1.vue'
import Comp2 from './views/Child2.vue'
</script>

<template>
  <h1>我是父组件</h1>
  <hr />
  <Comp1 />
  <hr />
  <Comp2 />
</template>

Comp1

<script setup>
import { ref } from 'vue'
import myMitt from '../../bus.js'

const msg = ref('hello brother!')
</script>

<template>
    <h2>我是哥哥</h2>
    <pre>我要传递数据给弟弟</pre>
    <button @click="() => myMitt.emit('my-event', msg)">click me!</button>
</template>

Comp2

<script setup>
import { ref, onMounted } from 'vue'
import myMitt from '../../bus.js'

const msg = ref('')
onMounted(() => {
    myMitt.on('my-event', (val) => msg.value = val)
})
</script>

<template>
    <h2>我是弟弟</h2>
    <pre>这是我接受哥哥的数据：{{ msg }}</pre>
</template>

类似于发布订阅模式