详解vue组件（二）props在父子组件之间的传值

props主要用于父组件传值给子组件，props可以用数组也可以用对象来接收数据，接下来我们从这两个维度来看一下props的用法。

（一）props作为数组来接收值

父组件传值：

<div id="app">
      <!-- 父组件将值传给子组件 -->
      <componenta :name='name' age='12' sex='未知'></componenta>
</div>

父组件在给子组件传值的时候既可以用冒号:传父组件里的动态数据，也可以像age一样直接传值。

子组件接收值：

var  componentA ={
    // 子组件接收父组件传的值
     props:['name','age'],
     template:'<div><p>我是{{name}},我今年{{age}}岁啦</p></div>'
 }
 var vm = new Vue({
     el:'#app',
     data:{
         name:"父组件"
     },
     components:{
         'componenta':componentA
     }
 })

子组件在用数组接收值时，直接在数组里面写父组件传值时的名字就可以，另外用到哪个值接收哪个值就行，不用全部都接收。接收后，在子组件里面就可以使用这个值了。

页面截图：

（二）props作为对象来接收值

父组件传值：（传值还是一样的）

<div id="app">
      <!-- 父组件将值传给子组件 -->
      <componenta :name='name' :age='age' sex='未知'></componenta>
</div>

子组件接收值：

var componentA ={
  // 子组件接收父组件传的值
    props:{
        name:{
            //规定传来数据的类型
            type:String,
            //如果没有传来使用默认数据
            default:'默认名称',
            //是否为必填项
            required:'true',
            //验证数据
            validator:function(value){
                return value.length > 10;
            }

        },
        age:{
          type:Number,
          default:18,
          required:'false',
          validator:function(value){
             return value > 0;
          }
                 
       }
    },
    // props:['name','age'],
    template:'<div><p>我是{{name}},我今年{{age}}岁啦</p></div>'
}
var vm = new Vue({
    el:'#app',
    data:{
        name:"父组件",
        age:10
    },
    components:{
        'componenta':componentA
    }
})

以对象类型来接收父组件传来的值最大的好处，可以对传来的值进行校验与约束。

props用对象类型接收时校验所传的参数：

type:
可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。
default:
any 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator: Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

(来自官网)

页面截图：

如果把必填项都设为false，然后父组件不传值的话，就会显示我们设置的默认值。