vue教程3-05 vue组件数据传递一、vue默认情况下，子组件也没法访问父组件数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style></head><body><div id="box"><aaa></aaa></div><script>var vm=new Vue({el:'#box',data:{a:'aaa'},components:{'aaa':{data(){return {msg:'我是父组件的数据'}},template:'<h2>我是aaa组件</h2><bbb></bbb>',components:{'bbb':{template:'<h3>我是bbb组件->{{msg}}</h3>'//这里是子组件，是访问不到父组件的数据msg}}}}});</script></body></html> 二、数据传递组件数据传递: √1. 子组件获取父组件data在调用子组件：<bbb :m="数据"></bbb>子组件之内:props:['m','myMsg']props:{'m':String,'myMsg':Number}2. 父级获取子级数据*子组件把自己的数据，发送到父级vm.$emit(事件名,数据);v-on: @ 1、子组件获取父组件data 方法一：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style></head><body><div id="box"><aaa></aaa></div><template id="aaa"><h1>11111</h1><bbb :mmm="msg2" :my-msg="msg"></bbb></template><script>var vm=new Vue({el:'#box',data:{a:'aaa'},components:{'aaa':{data(){return {msg:111,msg2:'我是父组件的数据'}},template:'#aaa',components:{'bbb':{props:['mmm','myMsg'],//my-msg在这里要变成驼峰命名法template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'}}}}});</script></body></html>方法二：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style></head><body><div id="box"><aaa></aaa></div><template id="aaa"><h1>11111</h1><bbb :mmm="msg2" :my-msg="msg"></bbb></template><script>var vm=new Vue({el:'#box',data:{a:'aaa'},components:{'aaa':{data(){return {msg:111,msg2:'我是父组件的数据'}},template:'#aaa',components:{'bbb':{props:{'m':String,//注明数据类型'myMsg':Number},template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'}}}}});</script></body></html> 2、 父级获取子级数据方法一：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style></head><body><div id="box"><aaa></aaa></div><template id="aaa"><span>我是父级 -> {{msg}}</span><bbb @child-msg="get"></bbb></template><template id="bbb"><h3>子组件-</h3><input type="button" value="send" @click="send"></template><script>var vm=new Vue({el:'#box',data:{a:'aaa'},components:{'aaa':{data(){return {msg:'我是父组件的数据'}},template:'#aaa',methods:{get(msg){// alert(msg);this.msg=msg;}},components:{'bbb':{data(){return {a:'我是子组件的数据'}},template:'#bbb',methods:{send(){this.$emit('child-msg',this.a);}}}}}}});</script></body></html>注意：vm.$dispatch(事件名,数据) 子级向父级发送数据vm.$broadcast(事件名,数据) 父级向子级广播数据配合: event:{}在vue2.0里面已经，报废了 slot:位置、槽口作用: 占个位置，不覆盖原先的内容类似ng里面 transclude （指令）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style></head><body><div id="box"><aaa><ul slot="ul-slot"><li>1111</li><li>2222</li><li>3333</li></ul><ol slot="ol-slot"><li>111</li><li>222</li><li>333</li></ol></aaa><hr><aaa></aaa></div><template id="aaa"><h1>xxxx</h1><slot name="ol-slot">这是默认的情况</slot><p>welcome vue</p><slot name="ul-slot">这是默认的情况2</slot></template><script>var vm=new Vue({el:'#box',data:{a:'aaa'},components:{'aaa':{template:'#aaa'}}});</script></body></html>效果图：vue-> SPA应用，单页面应用 vue-router路由vue-> SPA应用，单页面应用 vue-router路由vue-resouce 交互vue-router 路由路由：根据不同url地址，出现不同效果该课程配套用 0.7.13版本 vue-router主页 home新闻页 newshtml:<a v-link="{path:'/home'}">主页</a> 跳转链接展示内容:<router-view></router-vie
