vue-父子组件
Posted lanlanDong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-父子组件相关的知识，希望对你有一定的参考价值。
1
<!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‘:{ template:‘<h2>我是aaa组件</h2><bbb></bbb>‘, components:{ ‘bbb‘:{ template:‘<h3>我是bbb组件</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> <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>‘ } } } } }); </script> </body> </html>
3
<!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> </template> <script> var vm=new Vue({ el:‘#box‘, data:{ a:‘aaa‘ }, components:{ ‘aaa‘:{ data(){ return { msg2:‘我是父组件的数据‘ } }, template:‘#aaa‘, components:{ ‘bbb‘:{ props:[‘mmm‘], template:‘<h3>我是bbb组件->{{mmm}}</h3>‘ } } } } }); </script> </body> </html>
4
<!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‘], template:‘<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>‘ } } } } }); </script> </body> </html>
5.
<!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>
6.
<!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: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); } } } } } } }); </script> </body> </html>
以上是关于vue-父子组件的主要内容，如果未能解决你的问题，请参考以下文章