Vue-Prop父组件向子组件传参

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

点击查看 Prop-官方文档

一、父组件向子组件传参，

1.先将要prop传递的数据绑定在子组件在父组件中的实例里。
2.然后子组件里设置props进行数据接受，
3.并通过文本插值放入组件中。

【父组件】

【子组件】

二、注意：子组件中v:bind绑定的都是表达式而不是字符串。

三、prop一次传对象的多个值

如果想将一个对象的所有属性都作为prop传入，可以使用不带参数的v-bind。例如

等价于

四、子组件改变prop值

有两种常见情况，子组件试图改变一个prop的情形。
1、这个prop用来传递一个初始值，这个子组件接下来希望将其作为一个本地的prop数据来使用。这种情况，最好定义一个本地的data属性并将其这个prop用作其初始值。

props: ['initialCounter'],
data:  () {
  return {
    counter: this.initialCounter
  }
}

2、这个prop以一种原始的值传入且需要进行转换。这种情况下，最好使用这个prop的值来定义一个计算属性。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

五、Prop验证

export default{
  data(){
    
  },
  props:{
    propA:{
      type : String,
      required : true, //表示必填
      default : "abc" , //默认值
 或 default : function(){
        return { message : "hello" }  //对象或数组且一定会从一个工厂函数返回默认值
      },
    propF{
        validator:function(value){
          //这个值必须匹配下列字符串中的一个
          return ['success','warning','danger'].indexof(value) !== -1
        }
     } 
    }
  }
}

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

type 可以是原生构造函数中的一个：String、Number、Boolean 、Array、Object、Date、Function、Symbol。也可以是一个自定义的构造函数。