vue3兄弟组件之间传值

在Vue3中，兄弟组件之间传值可以通过以下方式实现：

1. 使用事件总线(Event Bus)

事件总线是一种通信方式，可以在Vue应用程序中跨越多个组件进行通信。在Vue3中，可以使用`mitt`库来实现事件总线。首先在项目中安装`mitt`库：

npm install mitt

然后在需要进行通信的组件中创建一个事件总线实例：

import mitt from 'mitt'

const eventBus = mitt()

在发送方组件中使用`eventBus.emit()`方法触发事件：

eventBus.emit('eventName', eventData)

在接收方组件中使用`eventBus.on()`方法监听事件并获取数据：

eventBus.on('eventName', eventData => {
  // 处理数据
})

2. 使用provide/inject

`provide/inject`是Vue3提供的一种依赖注入方式，可以在父组件中向子组件传递数据。使用`provide`方法在父组件中提供数据：

import { provide } from 'vue'

provide('dataName', data)

在子组件中使用`inject`方法注入数据：

import { inject } from 'vue'

const data = inject('dataName')

3. 使用vuex

vuex是Vue的状态管理库，可以在Vue应用程序中进行集中式管理。在Vuex中，可以通过`state`中的数据来实现兄弟组件之间的通信。在发送方组件中使用`this.$store.commit()`方法触发`mutation`来修改`state`中的数据：

this.$store.commit('mutationName', data)

在接收方组件中使用`mapState`方法映射`state`中的数据：

import { mapState } from 'vuex'

...mapState({
  stateName: state => state.dataName
})