vue20 父子组件数据交互
子组件使用父组件数据
<!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> <!-- vue-devtools 调试工具 github 搜索vue-devtools，最下面Get it on the Chrome Web Store.--> <div id="box"> <aaa> </aaa> </div> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ //组件嵌套 template:'<h2>我是aaa组件</h2><bbb></bbb>', components:{ 'bbb':{ template:'<h3>我是bbb组件</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> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:'我是父组件的数据' } }, template:'<h2>我是aaa组件{{msg}}</h2><bbb></bbb>', components:{ 'bbb':{//访问不到,子组件也没法访问父组件数据 template:'<h3>我是bbb组件->{{msg}}</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"></bbb> <!--aaa模版中可以访问aaa的data--> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg2:'我是父组件的数据' } }, template:'#aaa', //aaa组件的模版 components:{ 'bbb':{ props:['mmm'], template:'<h3>我是bbb组件->{{mmm}}</h3>' //bbb组件的模版 } } } } }); </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> <!--aaa模版中可以访问aaa的data--> </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'],//js里面不能用横线要驼峰 template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>' //子组件访问父组件的data } } } } }); </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:{ 'mmm':String, 'myMsg':Number }, 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> <!-- 子组件把自己的数据，发送到父级,vm.$emit(事件名,数据); child-msg事件bbb是可以接收的， 接收v-on:简写@，接收事件执行一个函数get。 vm.$dispatch(事件名,数据) 子级向父级发送数据 vm.$broadcast(事件名,数据) 父级向子级广播数据 配合: event:{} 在vue2.0里面已经，报废了 --> <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:111, msg2:'我是父组件的数据' } }, 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);//this是vm } } } } } } }); </script> </body> </html>
