vue3 兄弟组件通信 不用vuex

Vue3中的兄弟组件通信可以使用事件总线(Event Bus)或者provide/inject来实现，而不一定需要使用Vuex。

事件总线是一个Vue实例，在App.vue或者根组件中创建一个新的Vue实例，然后通过`$emit()`方法触发自定义事件，再通过`$on()`方法在另一个组件中监听事件并执行相应的操作。这样，兄弟组件之间就可以通过事件总线来进行通信。

例如，创建一个事件总线实例：

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

在发送组件中触发自定义事件：

// Sender.vue
<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendData() {
      EventBus.$emit('event-name', data);
    }
  }
}
</script>

在接收组件中监听事件：

// Receiver.vue
<script>
import { EventBus } from './EventBus';

export default {
  created() {
    EventBus.$on('event-name', this.handleData);
  },
  methods: {
    handleData(data) {
      // 处理数据
    }
  }
}
</script>

另一种方式是使用provide/inject来实现兄弟组件通信。在发送组件的父级组件中使用provide提供数据，在接收组件的父级组件中使用inject注入数据，然后在接收组件中就可以直接使用提供的数据。这样，兄弟组件之间就可以共享数据。

例如，在父级组件中提供数据：

// Provider.vue
<template>
  <child-component :data="data"></child-component>
</template>

<script>
export default {
  provide() {
    return {
      data: this.data
    }
  },
  data() {
    return {
      data: '需要共享的数据'
    }
  }
}
</script>

在接收组件中注入数据并使用：

// Injector.vue
<template>
  <div>{{ injectedData }}</div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

以上两种方式都可以实现兄弟组件之间的通信，选择使用哪种方式取决于项目的需求和场景。