完整教程：Vue中的props方式

理解

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

用法：

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

<
!-- 子组件 Child.vue -->
<template>
  <div>
    <
    !-- 使用接收的 props 数据 -->
    <p>收到的名字：{
      { name
      }
      }<
      /p>
      <p>收到的年龄：{
        { age
        }
        }<
        /p>
        <
        /div>
        <
        /template>
        <script>
          export default {
          // 声明需要接收的 props（简单写法）
          props: ['name', 'age']
          }
          <
          /script>

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

<
!-- 父组件 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 的类型、默认值、是否必传等：

<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 就是父组件给子组件送东西的通道，子组件要先声明“要什么”，父组件再“给什么”