Props
父组件可以通过 props
将数据传递给子组件。这是最常见的组件间通信方式
html
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from Parent',
};
},
};
</script>
html
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>
自定义事件 (Emit)
子组件可以通过 $emit
触发事件将数据传递回父组件。
html
<!-- 子组件 -->
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit('custom-event', 'Hello from Child');
},
},
};
</script>
html
<!-- 父组件 -->
<template>
<ChildComponent @custom-event="handleEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleEvent(message) {
console.log(message);
},
},
};
</script>
Vuex
Vuex 是 Vue 的状态管理库,可以用来在多个组件间共享状态。
Provide / Inject
这是一种从祖先组件注入数据到后代组件的方式,而无需逐层传递 props。
Ref 和 Reactive
使用 Composition API,可以利用 refs 和 reactive 数据来实现组件间的通信。
Event Bus
虽然在 Vue 3 中,官方推荐使用 Composition API 和其它更现代的通信方式,但在某些情况下,你可能仍然会使用 Event Bus(事件总线)。这通常涉及到创建一个全局事件中心,组件可以通过它发送和接收事件。
javascript
// src/eventBus.js
import { onMounted, onBeforeUnmount } from 'vue';
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;
html
<!-- 发送方组件 -->
<script>
import eventBus from '@/eventBus';
export default {
onMounted() {
eventBus.on('someEvent', payload => {
console.log(payload);
});
},
onBeforeUnmount() {
eventBus.off('someEvent');
},
methods: {
triggerEvent() {
eventBus.emit('someEvent', 'Hello from Sender');
},
},
};
</script>
选择哪种方式取决于你的具体需求和组件层次结构。对于简单的父子组件关系,使用 Props 和自定义事件通常就足够了。对于更复杂的场景,如非父子组件之间的通信,Vuex 或者 Event Bus 可能会更加合适。