看了好久的vue，終於弄懂了父子組件是怎樣傳遞數據的，期中，我看了官網還是不懂，最終看了智能社陳瀟冰老師的視頻，恍然大悟，此刻，在這里，超級謝謝陳瀟冰老師。
大家都知道，父子組件的作用域是相互獨立的，那么父子組件又是怎樣通信的呢。VUE官網上說，父組件向子組件傳遞數據使用props選項，而子組件通過events事件觸發，發送數據給父組件
1.父組件向子組件傳遞數據
首先引入vue.js（這里是2.2.0版本） 先將父子組件的內容展示出來
<div id="box">
<parent></parent>
</div>
<template id="parent"> //父組件內容
<div> //此處元素有且只有一個，2.0以上版本規定，組件的根元素有且只有一個
<div style="border:1px solid red;width: 300px;">
<h1>父組件</h1>
<p>{{parentMsg}}</p>
</div>
<child></child>
</div>
</template>
<template id="child"> //子組件內容
<div> //此處元素有且只有一個，2.0以上版本規定，組件的根元素有且只有一個
<h1>子組件</h1>
<p>{{childMsg}}</p>
</div>
</template>
<script>
var child={
data(){
return {
childMsg:"我是子組件數據"
}
},
template:"#child"
}
var parent={
data(){
return {
parentMsg:"我是父組件的數據"
}
},
components:{
'child':child
}
new Vue({
el:"#box",
components:{
'parent':parent
}
});
</script>
以下是瀏覽器渲染的效果圖：
現在我想，讓子組件獲取到父組件中parentMsg數據，只需兩步：
1.父組件將數據傳遞給props橋梁
2.props將數據傳遞給子組件
所以，首先，子組件要聲明自己需要父組件的哪個數據，
<template id="parent"> //父組件內容
<div>
<div style="border:1px solid red;width: 300px;">
<h1>父組件</h1>
<p>{{parentMsg}}</p>
</div>
<child :get-parent="parentMsg"></child> //通過get-parent屬性綁定父組件的parentMsg數據
</div>
</template>
var child={
data(){
return {
childMsg:"我是子組件數據"
}
},
props:['getParent'], //通過props聲明自己所要的數據
template:"#child"
}
在子組件中調用父組件數據
<template id="child"> //子組件內容
<div>
<h1>子組件</h1>
<p>{{childMsg}}</p>
<p style="color:green">獲取父組件的數據-->{{getParent}}</p>
</div>
</template>
然后瀏覽器的渲染結果如下：
紅色箭頭處 就睡獲取到的父組件數據
今天就先說到這里，只講了父組件向子組件傳遞數據，接下里會說子組件向組件傳遞數據，歡迎噴子們噴我哦