【Vue】组件通信组件通信

在Vue中，组件间的通信可以通过多种方式实现，以下是几种常用的组件通信方法：

1. 使用props和$emit进行父子组件通信。

父组件：

<template>
  <ChildComponent :parentData="dataFromParent" @childEvent="handleChildEvent" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromParent: 'This is data from parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      // 处理子组件发出的事件
    }
  }
};
</script>

子组件：

<template>
  <div>
    {{ parentData }}
    <button @click="sendDataToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  props: ['parentData'],
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Data from child');
    }
  }
};
</script>

2. 使用$refs进行任意组件间通信。

<template>
  <ChildComponent ref="child" />
  <button @click="sendDataToChild">Send to Child</button>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    sendDataToChild() {
      this.$refs.child.receiveData('Data from parent');
    }
  }
};
</script>

子组件：

<template>
  <div>{{ dataFromParent }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      dataFromParent: ''
    };
  },
  methods: {
    receiveData(payload) {
      this.dataFromParent = payload;
    }
  }
};
</script>

3. 使用Vuex进行状态管理。

首先，在Vuex中定义状态和动作：

// store.js
export const store = new Vuex.Store({
  state: {
    sharedData: 'Initial data'
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    updateData({ commit }, payload) {
      commit('updateData', payload);
    }
  }
});

然后，在组件中使用：

<template>
  <div>{{ $store.state.sharedData }}</div>
  <button @click=