2组件Props
组件Props
  属性的类型
    在组件配置项props中，可以以字符串数组形式列出的组件的属性
    也可以在props中，以对象的形式为每个属性指定值类型
    指定属性类型的好处
      相当于为组件提供了文档
      当输入错误类型时，浏览器的控制台会给予提示
  静态属性和动态属性
    传递静态属性
      在使用组件时，可以直接在组件上添加属性，并可以为属性传递一个静态属性值
    传递动态属性
      在使用组件时，可以使用v-bind为属性动态赋值
      可以赋值为一个数字、布尔值、数组、对象等
      可以使用不带参数的 v-bind，将一个对象的所有 property 都作为组件的 prop 传入
  单向数据流
    父级组件的更新 prop 会向下流动到子组件，反之则不行，Vue会发出警告
    目的是防止子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解
    当父级组件的prop值发生变更，子组件中所有的 prop 都将会刷新为最新的值
    如果真的想在子组件内部改变 prop，官方提供了两种可能的情形，及对应的做法
      情形一：这个 prop 传递一个初始值作为子组件的一个本地数据
      推荐做法：在子组件的data中声明一个属性，值为prop的值
      情形二：这个 prop 传递一个初始值需要在子组件中进行计算或转换
      推荐做法：在子组件中定义一个对应的计算属性
    特别注意，对于一个数组或对象类型的 prop，在子组件中变更这个对象或数组本身，将会影响到父组件
  属性验证
    属性验证有利于给使用组件的人提供帮助
    指定验证的方式，只要给组件的配置项props提供一个特定对象，对象的属性名即使组件prop，值为对应的验证
      propA: Number表示propA的值类型是Number
      propB: [String, Number]表示propB的值类型是String或Number
      propC: {type: String,required: true} 表示类型为String且必填
      propD: {type: Number,default: 1}表示类型为Number且有默认值
      propE: {type: Object,default() {return {message: 'hello' }}}表示默认值为对象，注意：对象或数组默认值必须从一个函数获取
      propF: {validator(value) {return ['success','warning', 'danger'].includes(value)}}表示自定义验证函数
      propG:{type:Function,default(){return 'xxx' }}表示类型为函数且带默认值
    开发环境中，当 prop 验证失败时，Vue会发出警告
    注意：属性验证会在组件实例创建之前进行验证，因此所有的组件实例的property如data、computed 等， 在 default 或 validator 函数中是不可用的
    type的类型
      可以是下列原生构造函数中的一个：String、Number、Boolean、Array、Object、Date、Function、Symbol
      可以是一个自定义的构造函数
  Prop 的大小写命名
    HTML中的attribute名是大小写不敏感，所以浏览器会把所有大写字符解释为小写
    因此，在组件注册时，prop名使用camelCase (驼峰命名法)，prop的名需要使用与HTML中等价的写法
    如果在字符串模板使用，则没有这个限制，既可以使用camelCase也可以使用kebab-case