组件参数校验与非props特性

props 类型：

• 常见的是字符串数组形式
  props: [ 'title', 'likes' ]
• 可以给每个 prop 设置指定的值类型
  props: { title: String, likes: Number }

可以传递静态或动态的 props ：

• 静态：直接使用属性名
• 动态：使用 v-bind 绑定属性名

props 验证：

使用带有验证关系的对象替换字符换数组

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return (value.length > 5)
      }
    }
  }
})

null 和 undefined 会通过任何类型验证
对象或数组默认值必须从一个工厂函数获取（函数 return）

props 特性

• 定义：父组件通过属性向子组件传值，且子组件 props 接收了该属性（父子组件有该属性的对应关系）
• 特点：1. 属性的传递不会在 dom 标签中显示（dom 标签中无该属性）。 2. 子组件通过 props 接收的属性可以直接在子组件使用。

非 props 属性

• 定义：父组件通过属性向子组件传值，但是子组件并未用 props 接收该属性（父子组件没有该属性的对应关系，父有子无）
• 特点：1. 由于没有通过 props 接收该属性，所以在子组件中直接使用该属性会报错。 2. 该属性会展示在子组件最外层的 dom 标签内