VUE父子组件如何通信

在 Vue.js 中，父子组件之间的通信有多种方式。以下是几种常见的方法：

1. 通过 Props 传递数据（父组件向子组件）

父组件可以通过 props 将数据传递给子组件。这是父子组件之间最常见的通信方式。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

2. 通过自定义事件（子组件向父组件）

子组件可以通过 $emit 方法向父组件发送事件，父组件可以在子组件上监听这些事件。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @childEvent="handleChildEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log('Received from child:', data);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Hello from Child!');
    }
  }
};
</script>

3. 使用 Vuex（全局状态管理）

当组件间的通信变得复杂时，可以使用 Vuex 来管理应用的全局状态。通过 Vuex，任何组件都可以访问和更新全局状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  }
});

在组件中使用 Vuex：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <input v-model="message" @input="updateMessage" />
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['setMessage']),
    updateMessage() {
      this.setMessage(this.message);
    }
  }
};
</script>

4. 通过插槽 (Slots)

父组件可以通过插槽将内容传递给子组件，这是一种灵活的组件组合方式。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <p>This is content from the parent!</p>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

总结

• Props: 从父组件传递数据到子组件。
• 自定义事件: 从子组件向父组件发送消息。
• Vuex: 用于全局状态管理，适合复杂组件间的通信。
• 插槽: 用于组件内容的灵活传递。

根据应用需求选择适合的通信方式，可以更好地管理组件之间的关系。