Vue父组件向子组件传值的方式

在 Vue 2 中，父组件向子组件传值的方式通常是通过自定义属性实现。在上述视频内容中，详细介绍了如何在 Vue 2 中进行父组件向子组件传值的操作。

在 Vue 3 中，父组件向子组件传值的方式也有了一些变化。以下是结合 Vue 3 的特点将上述内容改写成博客的形式：

一、引言

在 Vue 开发中，组件之间的传值通信是非常重要的环节。了解如何在不同组件之间进行有效的数据传递，可以提高代码的可维护性和可扩展性。本文将以父组件向子组件传值为例，分别介绍在 Vue 2 和 Vue 3 中的实现方法。

二、Vue 2 中的父组件传值到子组件

1. 为什么需要组件通信和传值？
   在实际开发中，例如一个包含多个子组件的首页，数据如果每个组件都去单独请求，会导致代码混乱且性能低下。所以通常由父组件请求一次接口，然后将数据传递给子组件，这就是父组件传值到子组件的常见场景。

2. 具体实现步骤

   • 准备父组件和子组件。在代码中创建一个名为home的父组件和一个名为handler的子组件。
   • 确定父子关系。在父组件home中引入子组件handler，通过import语句导入子组件，并在父组件的模板中使用子组件标签。
   • 父组件传值。父组件通过自定义属性将数据传递给子组件。在父组件的模板中，使用自定义属性并将其值设置为要传递的数据。例如，设置一个名为ab的自定义属性，其值为父组件中的数据msj。
   • 子组件接收值。子组件通过props接收父组件传递过来的值。可以使用字符串形式或者对象形式的props来接收数据。接收后，子组件就可以使用这个数据了。

三、Vue 3 中的父组件传值到子组件

在 Vue 3 中，父组件向子组件传值的方式与 Vue 2 有一些相似之处，但也有一些新的特性。

1. 相似之处

   • 同样可以通过自定义属性在父组件中向子组件传递数据。
   • 子组件仍然可以使用props来接收父组件传递过来的值。

2. 新特性

   • Vue 3 中对响应式数据的处理更加高效和灵活。可以使用reactive、ref等新的 API 来创建响应式数据，并且在父组件向子组件传值时，这些响应式数据可以更加方便地被子组件接收和使用。
   • Vue 3 的组合式 API 使得代码的组织更加清晰和易于维护。在父组件中，可以使用组合式 API 来处理数据的获取和传递，然后将数据传递给子组件。

例如，在父组件中使用组合式 API 获取数据，然后通过自定义属性将数据传递给子组件：

<template>
  <child-component :data="myData"></child-component>
</template>

<script>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const myData = reactive({
      message: 'Hello from parent'
    });
    return {
      myData
    };
  }
};
</script>

在子组件中接收父组件传递过来的数据：

<template>
  <div>{{ data.message }}</div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  }
};
</script>

四、总结

无论是在 Vue 2 还是 Vue 3 中，父组件向子组件传值都是一个常见的需求。在 Vue 2 中，通过自定义属性和props的方式可以实现父组件向子组件传值。在 Vue 3 中，除了保留了这种方式外，还引入了一些新的特性，使得数据的传递更加高效和灵活。在实际开发中，我们可以根据项目的需求和特点选择合适的方式来进行组件之间的传值通信