在Vue中，组件间的通信主要有以下几种方式：
- 父子组件通信：props / $emit
- 子父组件通信：$emit / v-on
- 兄弟组件通信：EventBus / Vuex
- 跨多层组件通信：EventBus / Vuex / provide / inject
- 状态管理：Vuex
以下是使用这些方法的简单示例：
- 父子组件通信：
父组件：
<template>
<ChildComponent :parentData="parentData" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: 'Hello from parent'
};
}
};
</script>子组件：
<template>
<div>{{ parentData }}</div>
</template>
<script>
export default {
props: ['parentData']
};
</script>- 子父组件通信：
子组件：
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit('from-child', 'Hello from child');
}
}
};
</script>父组件：
<template>
<ChildComponent @from-child="receiveFromChild" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
receiveFromChild(data) {
console.log(data); // 'Hello from child'
}
}
};
</script>- 兄弟组件通信：使用EventBus
EventBus.js:
import Vue from 'vue';
export const EventBus = new Vue();ComponentA.vue:
<template>
<button @click="sendToComponentB">Send to ComponentB</button>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
methods: {
sendToComponentB() {
EventBus.$emit('from-a', 'Hello from A');
}
}
};
</script>ComponentB.vue:
<template>
<div>{{ dataFromA }}</div>
</template>
<script>
import { EventBus } from './EventBus.js';
export default {
data() {
return {
dataFromA: ''
};
},
created() {
EventBus.$on('from-a', this.receiveFromA);
},
beforeDestroy() {
EventBus.$off('from-a', this.receiveFromA);
},
methods: {
receiveFromA(data) {
this.dataFromA = data;
}
}
};
</script>- 状态管理：使用Vuex
在Vuex中，你可以通过在store中定义状态、mutations和actions来实现组件间的通信。
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
sharedData: 'Hello from store'
},
mutations: {
updateData(st