vue中的props详解

一、props 的作用与设计目标

props 是父组件向子组件传递数据的唯一官方通道，其核心设计原则是：

• 单向数据流：父 → 子

• 子组件不得直接修改 props

• props 主要用于数据展示和配置，而非业务状态管理

典型使用场景：

• 表单组件接收初始值

• 列表组件接收数据源

• 通用组件接收配置项（如 size、type、disabled）

二、props 的两种定义方式（Vue 3）

1️⃣ 数组形式（不推荐在生产中使用）

export default { props: ['title', 'count'] }

特点：

• 无类型校验

• 无默认值

• 仅适合 demo 或极简组件

2️⃣ 对象形式（推荐）

export default { props: { title: String, count: Number } }

这是最常用、最安全的方式。

三、完整 props 定义（工程级写法）

export default { props: { title: { type: String, required: true }, count: { type: Number, default: 0 }, list: { type: Array, default: () => [] }, user: { type: Object, default: () => ({}) }, status: { type: String, validator(value) { return ['success', 'error', 'warning'].includes(value) } } } }

关键字段说明

四、支持的 type 类型

String Number Boolean Array Object Date Function Symbol

多类型支持

props: { id: [String, Number] }

五、default 的正确写法（高频坑点）

❌ 错误写法（引用类型）

default: [] default: {}

✅ 正确写法

default: () => [] default: () => ({})

原因：

• 防止多个组件实例共享同一引用对象

六、父组件如何传递 props

1️⃣ 静态传值

<Child title="hello" />

2️⃣ 动态绑定（最常用）

<Child :count="num" />

3️⃣ 对象展开（批量传递）

<Child v-bind="userInfo" />

const userInfo = { name: 'Tom', age: 18 }

七、子组件中使用 props（Vue 3）

1️⃣ Options API

export default { props: { title: String }, mounted() { console.log(this.title) } }

2️⃣ Composition API（推荐）

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

也可以解构（注意响应性）：

const { title } = defineProps({ title: String })

⚠ 解构后不是响应式（除非使用toRefs）

import { toRefs } from 'vue' const props = defineProps({ title: String }) const { title } = toRefs(props)

八、props 是只读的（非常重要）

❌ 错误：直接修改 props

props.count++

Vue 会警告：

Avoid mutating a prop directly

✅ 正确方式 1：使用本地状态

const localCount = ref(props.count)

✅ 正确方式 2：通过事件通知父组件

<Child :count="count" @update="count++" />

九、props 与 v-model（Vue 3 本质）

<Child v-model="value" />

等价于：

<Child :modelValue="value" @update:modelValue="($event)=>(value = $event)" />

子组件：

const props = defineProps({ modelValue: String }) const emit = defineEmits(['update:modelValue']) emit('update:modelValue', newValue)

十、props 的响应式特性

• 父组件数据变化 → 子组件 props 自动更新

• props 本身是浅只读响应式

• 引用类型内部属性可变，但不建议直接改

props.user.name = 'Jack' // 不推荐，破坏数据流

十一、props 常见错误总结

十二、最佳实践建议（非常重要）

1. props 只负责展示和配置

2. 复杂交互通过 emit / v-model

3. 引用类型 default 必须是函数

4. 对外组件必须写完整 props 校验

5. 不要在子组件修改父状态

十三、与 Vue 2 的主要区别（简述）