Vue3怎么在兄弟组件之间传值

在Vue3中，在兄弟组件之间传值可以使用事件总线（Event Bus）或者Vuex。其中，事件总线是一种轻量级的状态管理方式，适用于小型应用，而Vuex则适用于中大型应用。

下面是使用事件总线的示例代码：

1. 创建事件总线

在 main.js 中创建一个新的 Vue 实例来作为事件总线：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$bus = new app

2. 在兄弟组件中传递数据

在需要传递数据的组件中，使用 `$emit` 方法触发事件并传递数据：

export default {
  methods: {
    sendData() {
      this.$bus.emit('eventName', data)
    }
  }
}

3. 在接收数据的组件中监听事件

在需要接收数据的组件中，使用 `$on` 方法监听事件并处理数据：

export default {
  created() {
    this.$bus.on('eventName', data => {
      // 处理数据
    })
  }
}

这样就可以在兄弟组件之间传递数据了。

需要注意的是，使用事件总线可能会导致事件命名冲突，因此建议在事件名称前加上命名空间，例如：

this.$bus.emit('namespace:eventName', data)

this.$bus.on('namespace:eventName', data => {
  // 处理数据
})