[09] props

概念

• Props定义：prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”

• Props作用：向子组件传递数据

• Props特点：

  1. 可以传递任意数量的prop
  2. 可以传递任意类型的prop

• 注意:
  prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来

props校验

组件可以为 props 指定验证要求。为了定制 prop 的验证方式，可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

• 作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示，可以帮助开发者，快速发现错误。

props校验完整写法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

示例：

<template>
  <div>
    <h1>用户信息</h1>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: "Fei"
    },
    age: {
      type: Number,
      required: true,
      default: 18,
      validator(value) {
        return value >= 0 && value <= 150;
      }
    }
  }
};
</script>