看了好久的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>
然后浏览器的渲染结果如下：
红色箭头处 就睡获取到的父组件数据
今天就先说到这里，只讲了父组件向子组件传递数据，接下里会说子组件向组件传递数据，欢迎喷子们喷我哦