父向子通信
組件通信
通常一個單頁應用會以一棵嵌套的組件樹的形式來組織：
-
頁面首先分成了頂部導航、左側內容區、右側邊欄三部分
-
左側內容區又分為上下兩個組件
-
右側邊欄中又包含了3個子組件
各個組件之間以嵌套的關系組合在一起，那么這個時候不可避免的會有組件間通信的需求。
props（父向子傳遞）
父組件使用子組件時，自定義屬性（屬性名任意，屬性值為要傳遞的數據）
子組件通過props接收父組件數據，通過自定義屬性的屬性名
父組件使用子組件，并自定義了title屬性：
<div id="app"><h1>打個招呼：</h1><!--使用子組件，同時傳遞title屬性--><introduce title="大家好，我是鋒哥"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">Vue.component("introduce",{// 直接使用props接收到的屬性來渲染頁面template:'<h1>{{title}}</h1>',props:['title'] // 通過props來接收一個父組件傳遞的屬性})var app = new Vue({el:"#app"}) </script>效果：
props驗證
我們定義一個子組件，并接收復雜數據：
const myList = {template: '\<ul>\<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\</ul>\',props: {items: {type: Array,default: [],required: true}}};-
這個子組件可以對 items 進行迭代，并輸出到頁面。
-
props：定義需要從父組件中接收的屬性
-
items：是要接收的屬性名稱
-
type：限定父組件傳遞來的必須是數組
-
default：默認值
-
required：是否必須
-
-
當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制臺的警告。
我們在父組件中使用它：
<div id="app"><h2>傳智播客已開設如下課程：</h2><!-- 使用子組件的同時，傳遞屬性，這里使用了v-bind，指向了父組件自己的屬性lessons --><my-list :items="lessons"/> </div> var app = new Vue({el:"#app",components:{myList // 當key和value一樣時，可以只寫一個},data:{lessons:[{id:1, name: 'java'},{id:2, name: 'php'},{id:3, name: 'ios'},]} })效果：
type類型，可以有：
注意：子組件模板有且只有一個根標簽
動態靜態傳遞
給 prop 傳入一個靜態的值：
<introduce title="大家好，我是鋒哥"/>給 prop 傳入一個動態的值： （通過v-bind從數據模型中，獲取title的值）
<introduce :title="title"/>靜態傳遞時，我們傳入的值都是字符串類型的，但實際上任何類型的值都可以傳給一個 props。
<!-- 即便 `42` 是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個JavaScript表達式而不是一個字符串。--> <blog-post v-bind:likes="42"></blog-post><!-- 用一個變量進行動態賦值。--> <blog-post v-bind:likes="post.likes"></blog-post>?
總結
