vue2.0 props

父组件传值给子组件  props


1. 组件实例的作用域是孤立的，也就是说子组件的模板和模块是无法直接调用父组件的数据。 所以需要通过props将父组件的数据传递给子组件，子组件在接受数据时需要需要显示声明props.


    Vue.component( ‘my-child’, {


props: [‘parent’],
template : ‘<p> {{parent}} is from parent’
    } );
    <my-child  parent=“this data”></my-child>. //其中parent为props中的变量； 




2.props中命名规则:
    (1) 如果在<my-child>中的属性使用驼峰式myParam命名，那么props中的命名为props:[‘myparam’].
    (2) 如果在标签中使用my-param，用”-”的方式隔开，这样在props中就可以使用 props:[‘myParam’].


3.动态props
     可以通过v-bind的方式将父组件的data数据传递给子组件。 且当父组件中的变量的值发生变化时，则传递给子组件的值自动回发生变化。
    <div id=“app”>
<input type=“text”. v-model=“message”>
<my-component v-bind:message=“message”></my-component>
    </div>
    Var myComponent = Vue.extend({


         props: [‘message’],
         template： “<p>{{ ’From parent : ’+message }}</p>”
    });
  


4.props验证
    不适用props验证时，props是一个数组； 如果使用props验证，那么props是一个json对象。
    (1) 基础类型检测. 接受的参数有: String,Number. Boolean. Function.Object.Array,NULL
    (2) 多种类型.    Prop:[Number, String] 表示参数允许多种类型之一。 
    (3) 参数必须     prop: { type:Number, required:true },参数必须有值，且为Number类型.
    (4) 参数默认     prop: {.type:Number, default:10 }  如果默认值为数组或对象，需要像组件中data属性那样，通过函数返回值的形式赋值。
         prop: {
              type： Object,
      default: function(){
                  return { a : ‘a’ }
      }
}
    (5) 自定义验证函数: prop: {.validator: function(value){.return value>0; }},验证值必须大于0；