Vue3兄弟组件传值（同级别组件传值Vue3）

在Vue3中，同级组件间的传值可以通过以下几种方式实现：

1. Provide/Inject API：父组件提供数据，子组件注入使用。
2. Event Bus：创建一个事件总线，通过事件发射与监听进行传值。
3. Vuex：使用Vuex状态管理库。
4. Global Event Listeners：通过全局事件监听器进行传值。
5. Composition API：使用provide和inject。

下面是使用Provide/Inject API的例子：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>
 
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const data = 'Hello from Parent';
    provide('data', data);
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    {{ data }}
  </div>
</template>
 
<script>
import { inject } from 'vue';
 
export default {
  setup() {
    const data = inject('data');
    return { data };
  }
};
</script>

在这个例子中，ParentComponent通过provide提供了一个名为data的值，然后ChildComponent通过inject来接收这个值。这样，两个同级组件间实现了传值。