微信訂閱號：Rabbit_svip
組件和組件之間的作用域是相互獨立的辣辫。也就是說芽突，數(shù)據(jù)是不能互通的。
組件和組件之間的傳值關(guān)系有幾種：
（父傳子）父組件把數(shù)據(jù)傳給子組件佳恬。
（子傳父）子組件把數(shù)據(jù)傳給父組件。
（平級傳輸）兄弟組件之間互傳數(shù)據(jù)于游。
本節(jié)講的是：父傳子
父傳子的過程中毁葱，用到的關(guān)鍵詞是：props
過程如下
HTML代碼
<div id="app">
<parent></parent>
</div>
<!--父組件-->
<template id="parent">
<div>
<child :message="msg"></child>
</div>
</template>
<!--子組件-->
<template id="child">
<div>
{{message}}
</div>
</template>
JS代碼
/*子組件*/
Vue.component('child', {
template: '#child',
props: ['message']
})
/*建立Vue實例*/
new Vue({
el: '#app',
data: {
msg: 'Hello'
},
/*父組件*/
components: {
'parent': {
template: '#parent',
data() {
return {
msg: 'Hello'
}
}
}
}
})
在父組件中調(diào)用了子組件，可以看到 id 為 “parent” 的 template 贰剥，里面用了 parent 倾剿，而且在 parent 標(biāo)簽中插入了 “ :message ”，這里用了vue的指令（帶語法糖的）蚌成，全寫應(yīng)該是：v-bind:message前痘。
因為我要傳 data 里面的數(shù)據(jù)，所以用了v-bind担忧。
如果只是傳死數(shù)據(jù)芹缔，可以不用指令。
而在子組件里瓶盛，用了 props 來接收 父組件 傳過來的東西最欠。
微信訂閱號：Rabbit_svip
在子組件中，用 props 接收到的數(shù)據(jù)惩猫，在使用的時候窒所，和調(diào)用 data 里的數(shù)據(jù)的用法是一樣的。
props 接收的數(shù)據(jù)帆锋，應(yīng)該用一個對象來接收吵取，這里用了數(shù)組的方法。
父組件可以同時傳多個不同的數(shù)據(jù)過來锯厢，在子組件這頭用一個props接收皮官，然后通過上面數(shù)組的方式，可以接收多個父組件傳過來的數(shù)據(jù)实辑。
