在Vue3中，组件间通信可以通过以下几种方式实现：
- Props / Events：父子组件之间的通信，父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件发送消息。
// 父组件
<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, props } from 'vue';
export default defineComponent({
props: {
parentData: String
},
setup(props) {
const sendToParent = () => {
inject('emit')('childEvent', '子组件数据');
};
return {
sendToParent
};
}
});
</script>
- Provide / Inject：依赖注入，父组件提供数据，子孙组件注入使用。
// 父组件
<template>
<ChildComponent />
</template>
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
provide('data', '父组件数据');
provide('emit', (event, value) => this.$emit(event, value));
}
};
</script>
// 子组件
<template>
<div>{{ data }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const data = inject('data');
return { data };
}
};
</script>
- Vuex：状态管理库，适用于大型应用，可以跨组件/模块共享状态。
// store.js
import { createStore } from 'vuex';
export default createStore({
state() {
return {
sharedData: '初始数据'
};
},
mutations: {
updateData(state, payload) {
state.sharedData = payload;
}
},
actions: {
updateData({ commit }, newData) {
commit('updateData', newData);
}
},
getters: {
sharedData: state => state.sharedData
}
});
- Global Event Bus：创建一个全局事件总线，用于组件间非父子通信。
// event-bus.js
import { createEventHook } from 'vue';
export const onGlobalEvent =