在Vue3.0中，组件间的通信可以通过以下几种方式实现：
- 父子组件通信：使用
props和$emit。 - 兄弟组件通信：使用事件总线（Event Bus）或Vuex进行状态管理。
- 祖子组件通信：通过共同祖亲组件进行中继，或使用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