Vue Props详解

封面图 • 2025-11-18 • Vue

在 Vue.js 中，**props** 是组件之间传递数据的一种方式。通过 props，父组件可以将数据传递给子组件，从而实现组件间的通信。下面是对 Vue Props 的详细讲解：

---

## 一、什么是 Props？

`props` 是 **Vue 组件中用于接收外部传入数据的属性**。它们是只读的，不能在子组件内部直接修改。

> ✅ **props 是从父组件传递到子组件的数据**

---

## 二、使用 Props

### 1. 在子组件中声明 props

```js
// ChildComponent.vue
export default {
  props: {
    message: String,
    count: Number,
    isActive: Boolean,
    user: Object,
    items: Array
  }
}
```

或者使用更详细的类型校验（推荐）：

```js
props: {
  message: {
    type: String,
    required: true,
    default: '默认消息'
  },
  count: {
    type: Number,
    default: 0
  }
}
```

### 2. 在父组件中传递 props

```vue
<template>
  <ChildComponent :message="parentMessage" :count="parentCount" />
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
      parentCount: 42
    }
  }
}
</script>
```

---

## 三、props 的类型校验

Vue 提供了强大的 props 类型校验功能，支持以下类型：

| 类型       | 说明                         |
|------------|------------------------------|
| `String`   | 字符串                       |
| `Number`   | 数字                         |
| `Boolean`  | 布尔值                       |
| `Array`    | 数组                         |
| `Object`   | 对象                         |
| `Date`     | 日期                         |
| `Function` | 函数                         |
| `Symbol`   | Symbol 类型                  |

示例：

```js
props: {
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  tags: {
    type: Array,
    default: () => ['tag1', 'tag2']
  }
}
```

---

## 四、props 的注意事项

### 1. props 是只读的

不要在子组件中直接修改 props 的值，否则会引发警告（在开发模式下）。

✅ 正确做法：如果需要修改，应该通过事件通知父组件，由父组件更新数据。

### 2. prop 的命名规则

- 在 JavaScript 中使用驼峰命名法（`userName`）
- 在模板中使用短横线命名法（`user-name`）

```vue

<ChildComponent :user-name="userName" />

props: {
  userName: String
}
```

### 3. 默认值设置

使用 `default` 属性为 props 设置默认值，适用于非必需的 props。

```js
props: {
  theme: {
    type: String,
    default: 'light'
  }
}
```

### 4. 必需的 props

使用 `required: true` 标记该 prop 是必须的：

```js
props: {
  id: {
    type: Number,
    required: true
  }
}
```

---

## 五、Prop 的验证函数

你可以使用函数来验证 prop 的值是否符合预期：

```js
props: {
  rating: {
    validator: function (value) {
      return value >= 0 && value <= 10
    }
  }
}
```

---

## 六、动态绑定 props

使用 `v-bind` 或简写 `:` 来动态绑定 props：

```vue
<ChildComponent :message="dynamicMessage" />
```

---

## 七、Prop 的作用域

props 是 **单向数据流** 的一部分，意味着：

- **父组件 → 子组件**：通过 props 传递数据
- **子组件 → 父组件**：通过 `$emit` 触发事件

---

## 八、总结

| 特性           | 说明                                                                 |
|----------------|----------------------------------------------------------------------|
| 定义位置       | 在子组件的 `props` 选项中定义                                        |
| 数据流向       | 父组件 → 子组件（单向）                                              |
| 可读性         | 只读，不可修改                                                       |
| 类型校验       | 支持多种类型校验和自定义验证函数                                     |
| 命名规范       | JS 使用驼峰，模板中使用短横线                                        |
| 默认值         | 使用 `default` 设置默认值                                            |
| 必需性         | 使用 `required` 标记是否必须                                         |
| 动态绑定       | 使用 `v-bind` 或 `:` 实现动态传递                                    |

---

## 九、示例代码

### 父组件（ParentComponent.vue）

```vue
<template>
  <div>
    <ChildComponent :message="msg" :count="num" />
  </div>
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      msg: 'Hello from parent',
      num: 100
    }
  }
}
</script>
```

### 子组件（ChildComponent.vue）

```vue
<template>
  <div>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
  </div>
</template>

---

如果你有更多关于 Vue 的问题，比如 `v-model`、`$emit`、`slots` 等，也可以继续问我 😊