Vue3子组件如何正确接收父组件传递的值？

Question

在 Vue3 中，子组件正确接收父组件传递的值是开发过程中常见的基础问题。通常通过 props 实现父子组件的数据通信。然而，很多开发者在实际使用中容易遇到诸如 props 未正确定义、数据类型不匹配、默认值未生效、或无法监听 props 变化等问题。特别是在使用 Composition API 时，部分开发者对 setup 语法糖中的 props 使用方式不够熟悉，导致传值失败。如何在 script setup 中正确声明和使用 props？如何处理 props 的类型校验与默认值？此外，当父组件传递的是响应式数据时，子组件如何保持同步？这些都是实践中需要重点掌握的内容。

Answer 1

1. Vue3 中 props 的基本使用方式

在 Vue3 中，父子组件之间的通信主要通过 props 实现。父组件通过绑定属性的方式将数据传递给子组件，而子组件则需要显式声明这些 props。

在 <script setup> 语法糖中，我们使用 defineProps 来定义子组件接收的属性：

    <script setup>
    const props = defineProps({
      title: String,
      count: Number
    })
    </script>
  

这样，子组件就可以通过 props.title 和 props.count 访问传入的数据。

2. props 类型校验与默认值设置

Vue 提供了类型校验机制来确保传入的数据符合预期。开发者可以为每个 prop 指定类型，并可选地提供默认值或是否必填。

示例如下：

    <script setup>
    const props = defineProps({
      title: {
        type: String,
        default: '默认标题'
      },
      requiredField: {
        type: Boolean,
        required: true
      }
    })
    </script>
  

当父组件未传入某个 prop 时，默认值会生效；若设置了 required: true，但父组件未传入，则会在控制台抛出警告。

3. 响应式数据同步与 watchEffect / watch 监听 props 变化

当父组件传递的是响应式数据（如 ref 或 reactive 创建的数据）时，子组件中的 props 是自动解包的，并保持响应性。

如果需要监听 props 的变化并执行副作用，可以使用 watchEffect 或 watch：

    <script setup>
    import { watchEffect } from 'vue'

    const props = defineProps(['count'])

    watchEffect(() => {
      console.log('count 发生变化:', props.count)
    })
    </script>
  

注意：不能直接对 props 进行赋值修改，否则会违反单项数据流原则。

4. 使用 defineModel 实现双向绑定（Vue 3.4+ 新特性）

在 Vue 3.4+ 中引入了 defineModel，用于简化子组件中对 v-model 的支持。

示例代码如下：

    <script setup>
    const model = defineModel()
    function updateValue(e) {
      model.value = e.target.value
    }
    </script>
  

这相当于自动处理了 v-model 的 modelValue 和 update:modelValue 的逻辑。

5. 常见问题及解决方案汇总

以下是开发中常见的几个问题及其解决办法：

问题描述	原因分析	解决方案
props 未正确定义	未在子组件中使用 defineProps 显式声明	使用 defineProps 正确声明所有接收的属性
数据类型不匹配	传递的值与定义的类型不符	确保父组件传入的数据类型一致，或在子组件中进行类型转换
默认值未生效	prop 被显式传入 null 或 undefined	检查是否传入了 falsy 值，合理使用默认值和条件渲染
无法监听 props 变化	未使用 watch 或 watchEffect 进行监听	使用 watch 或 watchEffect 显式监听 props 的变化

6. 组件通信流程图（Mermaid 格式）

以下是一个简单的组件通信流程图，展示了父组件如何向子组件传递数据：

    ```mermaid
    graph TD
    A[父组件] -->|传递 props| B(子组件)
    B --> C{是否定义 props}
    C -->|是| D[正常接收]
    C -->|否| E[报错或使用默认值]
    D --> F[监听 props 变化]
    F --> G[执行相应操作]
    ```