Vue3.js组件通信，兄弟组件，父子、祖孙组件

在Vue3.0中，组件间的通信可以通过以下几种方式实现：

1. 父子组件通信：使用props和$emit。
2. 兄弟组件通信：使用事件总线（Event Bus）或Vuex进行状态管理。
3. 祖子组件通信：通过共同祖亲组件进行中继，或使用Vuex/Provide/Inject。

以下是示例代码：

父子组件通信：

// 父组件
<template>
  <ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentData = ref('父组件数据');
 
    const handleChildEvent = (data) => {
      console.log('子组件触发的事件:', data);
    };
 
    return {
      parentData,
      handleChildEvent
    };
  }
};
</script>

// 子组件

<template>
  <button @click="sendToParent">发送给父组件</button>
</template>
 
<script>
import { defineComponent, inject, ref } from 'vue';
 
export default defineComponent({
  props: {
    parentData: String
  },
  setup(props, { emit }) {
    const sendToParent = () => {
      emit('childEvent', '子组件数据');
    };
 
    return {
      sendToParent
    };
  }
});
</script>

兄弟组件通信：

// EventBus.js
import { createApp } from 'vue';
 
export const EventBus = createApp({});
 
// 兄弟组件A
<template>
  <button @click="sendToSibling">发送给兄弟组件B</button>
</template>
 
<script>
import { EventBus } from './EventBus.js';
 
export default {
  setup() {
    const sendToSibling = () => {
      EventBus.emit('siblingEvent', '兄弟组件A数据');
    };
 
    return {
      sendToSibling
    };
  }
};
</script>

// 兄弟组件B

<template>
  <div>{{ siblingData }}</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import { EventBus } from './EventBus.js';
 
export default {
  setup() {
    const siblingData = ref('');
 
    onMounted(() => {
      EventBus.on('siblingEvent', (data) => {
        siblingData.value = data;
      });
    });
 
    return {
      siblingData
    };
  }
};
</script>

祖子组件通信：

// GrandParentComponent.vue
<template>
  <ParentComponent :injectData="injectData" />
</template>
 
<script>
import { provide } from 'vue';
import ParentComponent from './ParentComponent.vue';
 
export default {
  components: {
    ParentComponent
  },
  setup() {
    provide('grandParentData', '祖父组件数据');
    return {};
  }
};
</scrip