Vue中的props方式

理解

props 是 Vue 中父组件向子组件传递数据 的方式
props 是子组件声明的"接收清单"，告诉父组件："我需要这些数据，请传给我"。父组件通过属性的方式把数据传给子组件，子组件通过 props 接收后就能使用

用法：

1. 子组件声明需要接收的 props

js 复制代码

<!-- 子组件 Child.vue -->
<template>
  <div>
    <!-- 使用接收的 props 数据 -->
    <p>收到的名字：{{ name }}</p>
    <p>收到的年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  // 声明需要接收的 props（简单写法）
  props: ['name', 'age']
}
</script>

2. 父组件传递数据给子组件

js 复制代码

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <!-- 通过属性传递数据，属性名要和子组件 props 声明的一致 -->
    <Child 
      :name="parentName"  <!-- 传递变量 -->
      :age="18"           <!-- 直接传递字面量 -->
    />
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      parentName: '张三'  // 父组件的数据
    }
  }
}
</script>

指定 props 类型和验证

为了让数据更规范，可以指定 props 的类型、默认值、是否必传等：

js 复制代码

<script>
export default {
  props: {
    // 名字：必须是字符串，且必填
    name: {
      type: String,
      required: true
    },
    // 年龄：必须是数字，默认值 18
    age: {
      type: Number,
      default: 18
    },
    // 爱好：必须是数组
    hobbies: {
      type: Array,
      // 数组/对象的默认值必须用函数返回
      default: () => ['读书', '运动']
    }
  }
}
</script>

注意：

props 是单向数据流：父组件数据变化会影响子组件，但子组件不能直接修改 props（就像孩子不能直接修改父母给的东西，要改需告诉父母）。
如果子组件需要修改 props，应该通过 $emit 通知父组件，由父组件修改数据。

props 就是父组件给子组件送东西的通道，子组件要先声明"要什么"，父组件再"给什么"