父元件傳值給子元件  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；