【Vue.js】组件数据通信——基于Props 实现父组件--＞ 子组件传递数据（最基础案例）

前言

在 Vue 3 中，父组件向子组件传递数据是通过props实现的。父组件在子组件的标签上绑定数据，子组件通过定义props接收这些数据。这种方式使得数据单向流动，确保组件之间的数据传递清晰且易于管理。接下来，我们将详细探讨如何通过props实现父组件到子组件的数据传递。

本博客文章内容均可以在 Vue演练场中直接使用.

• 强烈建议和我一样的初学Vue者在演练场中运行代码。

父子通信流程

父子组件数据传递流程如图：

关键技术点

• 数据绑定：父组件用 v-bind:（或 : 缩写）传递javaScript 的变量/函数/基本类型数据；
• Prop 声明：子组件通过 defineProps 定义接收规范
• 单向数据流：子组件不能直接修改 props（需通过 emit 通知父组件修改）

关键规则

• 数据入口：父组件通过 props 传递数据（唯一入口）
• 通信出口：子组件通过 emit 触发事件（唯一出口）
• 数据所有权：谁持有数据，谁负责修改（父组件管理状态）
• 性能优化：避免在子组件中解构 props（用 toRefs 保持响应性）

实战

强烈建议以下代码直接在Vue.js 的演练平台中运行

接下来简单介绍父亲传值给子组件的基本步骤：

1. 在父组件中注册子组件

1.父组件引入子组件页面。并在模板中使用。

在父组件页面index.vue 先把子组件，例如名为Child.vue的页面注册，并在index.vue中，使用子组件 ,也就是说，在父组件index.vue模板中，有子组件标签，例如 <Chlid>等等。

2. 在父组件引入的子组件标签中，通过属性绑定，传入父组件想要给子组件的数据
在下面样例中，父组件想要传递给子组件的值，都是通过在引入的子组件标签中，直接把

• 父组件通过属性 send-car 来传递index.vue中的变量 car ，给子组件；
• 父组件通过属性 gift-list 来传递index.vue中的响应式数组gifts 给子组件。

index.vue (父页面)

<template>
<div><h3>父组件</h3><h5>父亲的车: {{car}}</h5><h5>父亲准备送给孩子的礼物</h5><ul><li v-for="(gift,index) in gifts" :key="index">{{gift}}</li></ul><Child :send-car="car" :gift-list="gifts"></Child>
</div>
</template>
<script setup>
import { ref,reactive } from 'vue'
// 引入子组件
import Child from './Child.vue'
// 父组件本身的变量
const car= ref('奔驰S450')
const gifts=reactive(['500元红包','乒乓球','帽子']);
</script>

解释

• 在上面的代码中：:send-car 的作用是将父组件中定义的响应式变量 car 数据绑定到子组件的 sendCar 属性上。使用 : 表示这是一个动态绑定，Vue 会将 car 的值传递给子组件。

• 在 :send-car="car" ，等号左边的属性，是子组件若要接收时，需要声明的变量，子组件需要通过 defineProps 定义 sendCar 属性接收（因为 Vue 会自动转换 kebab-case 为 camelCase);等号右边的值，正是父组件index.vue中声明的变量。

2. 子组件接收父组件传入的数据

子组件通过difineProps 接收父组件传过来的数据

• 子组件Child.vue, 通过定义defineProps 数组，并且在defineProps 属性中声明父组件传过来的
  数据，子组件直接获取即可。注意，父组件的属性绑定中，声明的send-car ，子组件需要转为camelCase才能接收。
• 如果你想直接获取父组件传过来的值，拿来直接渲染到子组件模板中（即不需要其余逻辑），直接在模板中使用插值语法（也就是 {{}} ）拿到。
• 如果你需要存储父组件传过来的数值，并进行后期的逻辑操作，那么你就需要从 Vue 的库中导入一个名为 defineProps 的函数

Child.vue

1. 【情况1】子组件直接拿到父组件的数据，渲染到页面上，不做任何处理

<template><div><h3>子组件</h3><h6>儿子收到父亲的汽车:{{sendCar}}</h6><h5>儿子收到父亲的礼物</h5><ul><li v-for="(gift,index) in giftList" :key="index">{{gift}}</li></ul></div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
// 只想把父组件的值，拿来就用，不做其他逻辑处理
defineProps(['sendCar','giftList'])
</script>

2. 【情况2】子组件存储父组件传过来的值，进行后续的逻辑校验与判断

<template>
<!--.... 和上面一样-->
</template>
<script setup lang="ts">
// 引入 defineProps
import { defineProps } from 'vue';
import {ref} from 'vue'
// defineProps(['sendCar','giftList'])
// 定义 props
const props = defineProps({sendCar: String,giftList: Array
});
const gg=ref(props.giftList)
console.log(gg.value)
</script>

3. 【情况3：对传输数据校验】

如果你还想对父组件传过来的值进行校验或者赋默认值等操作，可以扩充props内容

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps({title: String,        // 类型校验dataList: {           // 复杂校验type: Array,		// 传递的数据类型是数组required: true,		//default: () => []}
});
console.log(props.title); // 使用数据
</script>

两种写法的说明

// 数组写法（仅声明属性名，无类型校验）
defineProps(['sendCar', 'giftList'])// 对象写法（可类型校验+默认值）
defineProps({sendCar: { type: String, required: true },giftList: { type: Array, default: () => [] }
})

补充与总结

在父组件中，根据传递的数据类型解析方式，来确定是否使用 : 修饰符表示：

绑定方式	示例	传递的数据类型
带 : 动态绑定	:prop=“value”	可以是任意类型（变量、对象、数组、函数等）
不带：静态属性	prop=“val”	只能是字面意义上的字符串（即使内容是 “true” 或 “[1,2,3]” 也会被当作字符串）

只要用 ： 绑定，我们可以传递：

• 基本类型：String、Number、Boolean、null、undefined
• 引用类型：Array、Object、Function、Date 等
• 响应式数据：ref、reactive 包装的对象
• 函数，函数传递必须强制使用 :，例如 <Child :onClick="handleClick" />

注意： 即使传递的是字面量（非变量），也需要 : 来正确解析类型：例如

<!-- 需要 : 才能传递正确的类型 -->
<Child :count="42" :disabled="false" />
<!-- 否则会变成字符串 -->
<Child count="42" disabled="false" /> <!-- 实际传递的是 "42" 和 "false" -->

注意：
如果父组件传递给子组件的是Object 类型的数据，例如对象数组，那么直接打印只会显示[Object]
在 Vue 3 中，props 被包装成 Proxy 对象，控制台默认不会自动展开其内部数据，而是显示 Object 或 Proxy。用 JSON.stringify() 查看原始数据。

总结：父组件需要声明为小写，中间用 - 隔开的形式，子组件需要在defineProps 中转成camelCase才能接收成功。