第二阶段：Vue 组件化开发（第 18天）

xkxnq2026-01-12 9:01

Vue组件间通信：父组件向子组件传值（props）

一、核心概念

props的作用

父组件通过props向子组件传递数据，实现数据由上至下的流动。
props的定义

子组件需在props选项中声明接收的属性：
javascript 复制代码
```
// 子组件 ChildComponent.vue
export default {
  props: ['message'] // 简单声明
}
```

类型与默认值

支持类型校验和默认值设置：

javascript 复制代码

props: {
  count: {
    type: Number,    // 指定为数字类型
    default: 0       // 默认值
  },
  items: {
    type: Array,
    required: true  // 必须传递
  }
}

二、案例演示

父组件（传递数据）

vue 复制代码

<template>
  <ChildComponent 
    :message="parentMsg" 
    :count="num" 
    :items="list"
  />
</template>

<script>
export default {
  data() {
    return {
      parentMsg: "来自父组件的数据",
      num: 42,
      list: ["A", "B", "C"]
    }
  }
}
</script>

子组件（接收与渲染）

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p> <!-- 输出：来自父组件的数据 -->
    <p>计数：{{ count }}</p> <!-- 输出：42 -->
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    count: {
      type: Number,
      default: 100
    },
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

三、单向数据流原则

直接修改props的报错

若在子组件中尝试修改count：
javascript 复制代码
```
this.count = 100; // 错误操作！
```
控制台将报错：
复制代码
```
Avoid mutating a prop directly...
```
正确解决方案
- 子组件通过$emit事件通知父组件修改数据
javascript 复制代码
```
this.$emit('update-count', newValue);
```
- 父组件监听事件并更新：
vue 复制代码
```
<ChildComponent @update-count="num = $event" />
```

四、总结要点

关键点	说明
声明式接收	子组件通过`props`选项显式声明接收的属性
类型校验	支持`String`/`Number`/`Boolean`/`Array`/`Object`等类型校验
默认值与必传	`default`设置默认值，`required: true`强制必须传递
单向数据流	子组件不可直接修改props，需通过事件通知父组件
动态传递	父组件使用`v-bind`（简写`:`）动态绑定数据