Vue3 props 属性（建议收藏）

Vue3 props 属性 是父子组件通信的关键桥梁

在 Vue 3 中，props 属性是实现父子组件间数据传递的核心机制。父组件通过 props 向子组件传递数据，子组件则通过声明 props 来接收和使用这些数据。理解 props 的使用方式和特性，是构建灵活、可维护组件结构的基础。

核心概念

props 是一种自定义属性，允许父组件向子组件传递数据。这些数据在子组件中是只读的，不能被直接修改，只能通过事件（如 emit）通知父组件进行更新。

props 的本质是一个对象，用于定义子组件接收的参数类型、默认值、验证规则等。通过 props，可以实现组件间的解耦和复用。

基础语法

在 Vue 3 中，使用 <script setup> 语法糖可以更简洁地定义 props。以下是最基本的 props 用法：

const props = defineProps({
  title: String,       // 接收一个字符串类型的 title
  count: Number,       // 接收一个数字类型的 count
  active: Boolean      // 接收一个布尔类型的 active
});

父组件如何传递 props

在父组件中，通过绑定属性的方式将数据传入子组件：

<template>
  <ChildComponent title="欢迎来到 Vue3" count="42" active="true" />
</template>

props 默认值设置

如果父组件没有传入某个 prop，子组件可以设置默认值：

const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    default: 0
  }
});

进阶特性

Vue3 的 props 支持多种高级配置，包括类型检查、必填项、自定义验证函数等。以下是几个重要用法的对比：

类型验证与必填项

const props = defineProps({
  name: {
    type: String,
    required: true, // 必须传入
    default: 'Vue3' // 但 required 为 true 时 default 会被忽略
  },
  tags: {
    type: Array,
    default: () => ['default', 'tags'] // 对象/数组类型的默认值必须是工厂函数
  },
  user: {
    type: Object,
    required: true,
    validator(value) {
      return value && value.id && value.name; // 自定义验证规则
    }
  }
});

实战应用

场景一：展示用户信息

const props = defineProps({
  user: {
    type: Object,
    required: true
  }
});

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p>邮箱: {{ user.email }}</p>
    <p>状态: {{ user.isActive ? '活跃' : '不活跃' }}</p>
  </div>
</template>

父组件中传入：

<template>
  <UserInfoComponent :user="{
    name: '张三',
    email: 'zhangsan@example.com',
    isActive: true
  }" />
</template>

场景二：可复用的按钮组件

const props = defineProps({
  label: String,
  disabled: Boolean,
  color: {
    type: String,
    default: 'primary'
  }
});

<template>
  <button :disabled="disabled" class="btn" :class="color">
    {{ label }}
  </button>
</template>

场景三：接收并展示商品列表

const props = defineProps({
  products: {
    type: Array,
    required: true
  }
});

<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.name }} - ￥{{ product.price }}
    </li>
  </ul>
</template>

父组件传入：

<template>
  <ProductList :products="[
    { id: 1, name: '手机', price: 2999 },
    { id: 2, name: '笔记本', price: 8999 }
  ]" />
</template>

注意事项

1. props 是只读的
   不应该在子组件中直接修改 props 的值，而是通过 $emit 触发事件，让父组件处理数据变化。

2. 避免使用 Object.freeze() 传递 props
   如果父组件传入的 props 是一个冻结对象（使用 Object.freeze()），子组件将无法响应其变化。

3. 不要忽略类型检查
   Vue3 提供了详细的类型检查功能，如果传入的值类型不符，控制台会给出警告。合理使用类型检查可以提前发现错误。

4. 避免 props 和组件 data 重复定义
   如果 props 和 data 中有相同字段，props 会覆盖 data，容易引发状态混乱，应尽量避免。

常见问题

• Q：如何在子组件中获取 props？
  A：使用 defineProps() 函数声明 props，Vue 会自动将传入的属性映射到该对象中。

• Q：props 传入的是对象，子组件可以修改吗？
  A：不能直接修改 props 本身，但可以修改其子属性（如果未被冻结）。推荐通过 emit 事件与父组件通信。

• Q：如何传递多个 prop？
  A：可以通过对象方式传递，如 <ChildComponent :info="{ name: 'Vue3', version: 3 }" />。

• Q：如何为 props 添加自定义验证？
  A：使用 validator 函数，例如：validator(value) { return value.length > 5 }。

总结

Vue3 中的 props 属性是父子组件通信的基石，掌握其用法能够提升组件的可维护性和灵活性。通过合理的类型定义和验证，开发者可以构建出健壮且易于调试的组件结构。