[Props] vue组件间的传值及校验

基本用法

Prop的基本用法很简单，只须要在子组件的Vue实例中定义该属性并把值设为目标属性的数组便可

Vue.component('child', {
    ...
    // 接收message
    props: ['message']
    ...
 })

• 因为HTML中的属性是不区分大小写的，因此当使用DOM中的模板（HTML中）时，驼峰写法须要转化为短横线写法。可是，若是使用字符串模板（JS中）时，不受限制，能够随心所欲。

Prop中的静态和动态值

• 在正常状况下，通常在父组件中经过v-bind定义一个动态值，子组件经过Prop接收该值，因此，不少人认为，Prop只能接收动态值。可是，其实Prop能够接受静态属性。

/* 父组件 */
<child type="video"></child>
  /* 子组件 */
Vue.component('child', {
   ... 
  // 成功接收
   props: ['type'] 
  ...
})

• 在示例中，父组件在子组件标签上定义了静态属性type，子组件依然经过Prop拿到了静态属性type。

单向数据流

全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父组件的 Prop 的更新会向下流动到子组件中，可是反过来则不行。
这样会防止从子组件意外改变父组件以及同级子组件的状态，从而致使你的应用的数据流向难以理解。

• 另外，每次父组件发生更新时，子组件中全部的Prop都将刷新为最新的值。这意味着你不该该在子组件内部改变Prop，若是你这样作了，Vue会在控制台抛出一个警告。
  通常来讲，若是子组件须要操做Prop中的值，须要将Prop中的值赋值给本地定义的属性：

<div>
    <p>{{newMessage}}</p>
  </div> 
...
  props: ['message'],
  computed:{
    newMessage(){
      return this.message;
    }
  }
 ...

非Prop特性

• 非Props特性是指在组件上定义了属性，而又没有使用Prop接受属性。此时，子组件内不可以使用该属性值，该属性会直接添加到子组件的根节点上。
  好比，在一个只含有一个div的子组件上，若是我向子组件传了一个content属性，可是子组件不使用Prop接收content属性，则渲染结果为：

<div id="root">  
   <div content="hello"></div>
 </div>

Prop校验

• 子组件用Props接收父组件传来的消息有多种形式：

1. 数组形式

props: [data1, data2]

数组形式至关于直接接收消息，不作任何校验，通常来讲，不太建议使用数组形式。

2.简单对象形式

props: { data1: String, data2: Array}

简单对象形式对父组件传递的值进行了类型校验，若是传过来的值类型不一致，控制台会报错。

3.复杂对象形式

props: { 
  data1: {
    type: String, //设定类型
    required: true, //是否必须
    default: 'default value', //默认值  
    validator (value) {   return (value.length < 5)  } }, //校验规则 
  data2: {  
    type: Array,
    required: true,
    default: () => ['', '', ''] 
 }}

• 复杂对象形式的状况下，做为对象属性的参数能够写为对象形式，参数对象含有4个属性，
  • type
  • required
  • default
  • validator
• type：设定参数类型，当传入参数类型与type不相符时，控制台会报错
• required：设定参数是不是必传，当设为true时，不传该参数会报错
• default：设定默认值，当参数类型为复杂类型时，需使用工厂模式生成默认值，不然Vue会在控制台抛出警告。如图所示，就经过工厂模式生成了一个长度为3的空数组。
• validator：校验器，是一个函数，拥有一个表明传入值的形参，能够自定义各类校验，当返回false时，会报错，表示没经过校验。

【！】 注意那些 prop 会在一个组件实例建立以前进行验证，因此实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查

type 能够是下列原生构造函数中的一个：

String
Number
Boolean
Array
Object
Date
Function
Symbol

• 额外的，type 还能够是一个自定义的构造函数，而且经过 instanceof 来进行检查确认。

  例如，给定下列现成的构造函数：

  function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
  }

• 你可使用：

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

• 来验证 author prop 的值是不是经过 new Person 建立的。