Vue中组件间的通信

在Vue中，组件间的通信主要有以下几种方式：

1. 父子组件通信：props / $emit
2. 子父组件通信：$emit / v-on
3. 兄弟组件通信：EventBus / Vuex
4. 跨多层组件通信：EventBus / Vuex / provide / inject
5. 状态管理：Vuex

以下是使用这些方法的简单示例：

1. 父子组件通信：

父组件：

<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>

2. 子父组件通信：

子组件：

<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>

3. 兄弟组件通信：使用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>

4. 状态管理：使用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