vue2.0的父子组件数据传递

看了好久的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>

 然后浏览器的渲染结果如下：

红色箭头处 就睡获取到的父组件数据

今天就先说到这里，只讲了父组件向子组件传递数据，接下里会说子组件向组件传递数据，欢迎喷子们喷我哦