组件参数校验

一、概念

组件的参数校验： 指的是父组件通过属性的形式给子组件传递了数据，子组件可以对这个数据进行一个验证或者约束。

二、代码示例

父组件通过content属性给子组件传递数据

<div id="root">
  <child content="hello world"></child>    //父组件通过content属性传递数据
</div>

子组件：

Vue.component('child', {
  props:{
    content: {
      type: String,    //父组件传递的数据必须是字符串类型
      required: false,  //不是必填项
      default: 'default value',  //如果父组件未传值，就用这个默认值
      validator: function (value) {
        return (value.length > 5)  //父组件传递的数据长度要大于5
      }
    }
  },
  template: '<div>{{content}}</div>'
})

在这个例子中，通过type,required,default,validator等对content传的值进行了参数校验。

三、 非props属性

子组件没有声明要接收父组件要传递的属性。
在子组件内部也无法使用这个属性。
并且非props属性会展示子组件最外层dom中。