Vue 实现父子组件通信的方法

在 Vue 开发中，父子组件通信是一项基础且重要的技能。熟练掌握它，能够让我们构建出结构清晰、逻辑严谨的应用程序。

父组件向子组件传递数据

父组件向子组件传递数据主要通过 props 来实现。在父组件的模板中，我们可以将数据绑定到自定义属性上。例如：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentMessage: '这是来自父组件的数据'
    };
  }
};
</script>

在子组件中，通过 props 选项来接收这些数据。

<template>
  <p>{{ message }}</p>
</template>

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

这样，父组件的数据就成功传递给了子组件。

子组件向父组件传递数据

子组件向父组件传递数据则借助于事件。子组件通过 $emit 方法触发一个自定义事件，并传递数据。例如：

<template>
  <button @click="sendDataToParent">点击传递数据</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('child-event', '这是来自子组件的数据');
    }
  }
};
</script>

在父组件的模板中，监听这个自定义事件并定义相应的处理函数。

<template>
  <child-component @child-event="handleChildEvent"></child-component>
</template>

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

export default {
  components: {
    childComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log(data);
    }
  }
};
</script>

如此，子组件的数据就能顺利传递到父组件中。

还有一种非父子组件之间的通信方式——事件总线（Event Bus）和 Vuex。事件总线适用于简单场景，创建一个全局的事件总线对象，在需要通信的组件中引入它来实现数据传递。Vuex 则更适合大型项目，它将所有组件的状态集中管理，提供了更高效、可维护的状态管理方案。

掌握 Vue 父子组件通信的方法，能够让我们在开发过程中更灵活地组织组件结构，实现复杂的业务逻辑，提升开发效率和应用质量。