vue3兄弟组件之前传值

### Vue3 中兄弟组件间的数据传递

在 Vue3 中，有多种方式可以在兄弟组件之间传递数据。一种常见的方式是利用提供/注入机制配合事件总线(event bus)，另一种则是借助Vuex状态管理库。不过对于简单的场景来说，创建一个共享的服务或者使用`mitt`这样的轻量级事件发射器可能是更好的选择。

#### 使用 mitt 实现事件驱动的通信

安装 `mitt` 库可以通过 npm 或 yarn 完成：

npm install mitt

定义并导出一个全局事件中心实例，在项目入口文件中引入:

// main.js or wherever appropriate
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const emitter = mitt()

createApp(App).provide('emitter', emitter).mount('#app')

接着是在发送方组件内触发自定义事件并向其附加有效载荷(payload):

<!-- SenderComponent.vue -->
<template>
  <!-- ... template code here... -->
</template>

<script>
export default {
  name: "SenderComponent",
  
  inject: ['emitter'],

  methods: {
    sendData() {
      this.emitter.emit('message-from-sender', { message: 'Hello Brother!' })
    }
  }
}
</script>

最后一步就是在接收者组件里监听该特定名称的消息:

<!-- ReceiverComponent.vue -->
<template>
  <div>{{ receivedMessage }}</div>
</div>
</template>

<script>
export default {
  name: "ReceiverComponent",

  data(){
    return{
      receivedMessage:''
    };
  },

  inject: ['emitter'],
  
  created() {
    this.emitter.on('message-from-sender', ({ message }) => {
      this.receivedMessage = message;
    });
  },
};
</script>

这种方法允许两个不直接关联的组件能够互相交流而不需要通过父级中介[^1]。