Vue 中如何处理父子组件通信？

在 Vue 中，父子组件通信是前端开发中常见的问题，也是面试中经常被问及的一个话题。Vue 提供了多种方式来处理父子组件之间的通信，本文将为大家详细介绍几种常见的方法。

1. Props / $emit

在 Vue 中，父组件可以通过 props 向子组件传递数据，子组件可以通过 $emit 触发事件并把数据传递给父组件。下面是一个简单的示例：

<!-- Parent组件 -->
<template>
  <Child :message="message" @updateMessage="updateMessage"></Child>
</template>

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

export default {
  data() {
    return {
      message: 'Hello from Parent',
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    },
  },
  components: {
    Child,
  },
};
</script>

<!-- Child组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('updateMessage', 'Hello from Child');
    },
  },
};
</script>

在这个示例中，Parent 通过 props 将 message 传递给 Child 组件，并且定义了一个 updateMessage 方法用来更新 message。Child 组件通过 $emit 触发 updateMessage 事件并传递了新的 message 给 Parent 组件。

2. provide / inject

另一种常用的父子组件通信方式是使用 provide / inject。provide 可以在父组件中提供数据，子组件通过 inject 注入数据。示例如下：

<!-- Parent组件 -->
<template>
  <Child></Child>
</template>

<script>
export default {
  provide: {
    message: 'Hello from Parent',
  },
};
</script>

<!-- Child组件 -->
<template>
  <div>
    <p>{{ providedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    providedMessage() {
      return this.message;
    },
  },
};
</script>

在这个示例中，Parent 组件通过 provide 提供了 message 数据，Child 组件通过 inject 注入了 message 数据并使用 computed 属性来获取数据。

3. $parent / $children

Vue 还提供了 $parent 和 $children 属性，可以直接访问父组件和子组件的实例。这种方法不太推荐使用，因为会增加组件之间的耦合度，但在一些特定场景下也是可以使用的。示例如下：

<!-- Parent组件 -->
<template>
  <Child></Child>
</template>

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

export default {
  components: {
    Child,
  },
  mounted() {
    console.log(this.$children[0].message); // Access child component's data
  },
};
</script>

<!-- Child组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child',
    };
  },
};
</script>

在这个示例中，Parent 组件在 mounted 钩子中通过 $children 访问 Child 组件的实例，并直接访问了 Child 组件的 message 数据。