Vue元件通訊之一props
元件間通訊是元件開發時非常重要的一個環節，Vue在元件鍵通訊提供了直接訪問元件例項的方法，同時也提供了自定義事件機制，通過廣播、委派、監聽等形式跨元件的函式呼叫。
在元件的例項中，Vue提供了三個屬性對其父子元件以及根例項進行直接訪問：
（1）$parent：父元件例項；
（2）$children：包含所有子元件例項；
（3）$root：元件所在的根例項。
這三個屬性都掛載在元件的this上，雖然vue提供了直接訪問這種方式，但是官方文件中說明不建議這麼操作。因為這會導致父元件和子元件的緊密耦合，且自身狀態難以理解，所以儘量使用props在元件中傳遞資料。
元件例項的作用域是孤立的，也就是說子元件的模板和模組中預設是無法直接呼叫父元件中的資料，所以通過元件選型props將父元件的資料傳遞給子元件，子元件在接受資料是需要顯示宣告props。這個正向傳遞(從父元件到子元件)資料的過程就是通過props來實現的。
在元件的應用中，使用元件選型props來宣告需要從父元件接收的資料，props的值可以是兩種，一種是字串陣列，一種是物件。
【駝峰命令】
如果我們在<my-child>中屬性使用駝峰命名方式,那麼在props選項中命名即為props：[‘myChild’]。所以如果需要使用駝峰命名的話，我們需要在標籤中使用my-param，用“-”的方式隔開，這樣在props中就可以使用props:[‘myParam’]的形式進行宣告。
1.動態props
我們也可以通過v-bind的方式將父元件的資料傳遞給子元件。
<body> <div id="app"> <input type="text" v-model="message"/> <my-component v-bind:cmessage="message"></my-component> </div> <script> Vue.component('my-component', { props: ['cmessage'], template: "<p>{{'From parent:'+cmessage}}</p>" }); var vm = new Vue({ el: '#app', data: { message: '父元件預設值' } }); </script> </body>
【註釋】以上程式碼中的props宣告一個cmessage用來接受父元件message屬性的值。
2.props校驗
元件可以指定props驗證要求，這對開發第三方元件來說，可以讓使用者更加準確地使用元件。使用驗證的時候，props接收的引數為json物件，而不是上述例子中的陣列，例如：props:{a:Number},即為驗證引數a需要為Number型別，如果呼叫該元件傳入的a引數為字串則會丟擲異常。
Vue提供props驗證的方式有很多中，具體如下：
（1）基本型別檢測：prop接收的引數為原生構造器，Stirng，Number，Boolean，Function，Object，Array。也可以接收null，意味任意型別均可。
（2）多種型別：prop:[Number,String];允許引數為多種型別之一；
（3）引數必須:prop:[type:Number,required:true];表示引數必須有值且為Number型別。
（4）引數預設值：prop:[type:Number,default:10] 表示引數具有預設值10；需要注意的是如預設值設定為陣列或物件，需要向元件中data屬性那樣，通過函式返回值得形式複製，例如：
props:{
type:Object,
default:function () {
return { val: 10}
}
}
（5）自定義校驗 prop:{validator:function(value){return value>0;}} 表示驗證值必須大於0。