props配置项

props配置项让组件接收外部传过来的数据。

定义一个组件：

<template>
  <div>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <h2>学生年龄：{{age}}</h2>
  </div>
</template>
<script>
export default {
    name: 'Student',
    // 声明 name、sex、age 由父组件传入
    // 不能再在data配置项中配置这几个参数
    props: ['name', 'sex', 'age']
}
</script>

在父组件中向子组件传值：

<template>
  <div id="app">
    <!-- 向子组件传值 -->
    <Student name='王五' sex='男' age='32'/>
  </div>
</template>

如果要向子组件传递一个数值类型的变量，可以使用v-bind的形式传值：

<template>
  <div id="app">
    <!-- 使用 :age 向子组件传入数值类型的值 -->
    <Student name='王五' sex='男' :age='32'/>
  </div>
</template>

因为v-bind的内容是js表达式，32做为表达式表示数值32。

传入参数类型验证

可以在props配置项中，在子组件中指定接收的变量值的类型：

props: {
    name:String,
    sex:String,
    age:Number  // 指定age接收的是Number类型的变量
}

此时，如果父组件向子组件传入了一个字符串类型的age，则会直接在浏览器控制台报错：

Invalid prop: type check failed for prop "age"

限制参数必须

在props配置项中，设置某些参数必须传入、某些参数的默认值：

export default {
    name: 'Student',
    props: {
        name: {
            type:String,  // 传入值的类型
            required: true  // 是否必需
        },
        age: {
            type:Number,
            default: 99  // 默认值
        },
        sex: {
            type:String
        }
    }
}

如果父组件没有传入必须的参数，会在浏览器控制台报错

修改接收到的父组件的值

子组件中，要接收的参数不能配置到data中，否则会报错。

接收自父组件的值不能直接修改，否则可能会出问题。

但是，可以在data配置项中另外定义一个变量，将父组件传入的值赋值给新建的变量。(Vue会先接收父组件的值，然后才解析组件的data，所以在data配置项中可以接收到父组件的值)

<template>
  <div>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <h2>学生年龄：{{myAge}}</h2>
      <!-- 只能修改组件中自定义的myAge，不能直接修改传入的age -->
      <button @click='myAge++'>点我更新年龄</button>
  </div>
</template>
<script>
export default {
    name: 'Student',
    props: ['name', 'sex', 'age'],
    data() {
        return {
            myAge: this.age  // 将父组件传入的age赋值到组件中自定义的myAge上
        }
    },
}
</script>