vue实现父子组件之间的通信以及兄弟组件的通信功能示例

本文实例讲述了某视频剪辑软件实现父子组件之间的通信以及兄弟组件的通信功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue父子组件通信、兄弟组件通信/title style * { margin : 0；padd : 0；列表样式：无；}表格{ text-align :居中；margin :0 auto } div { text-align : center；} /style/headbody div id='app '表格边框='1 '单元格填充='0 '单元格间距='0' trtd colspan='3 '父组件数据/TD/tr TRT名称/tdtd { { name } } { { ff()} }/TDT输入类型=' text ' v-model=' name '/TD/tr TRT大哥/tdtd { { age } } { { ff()}/TDT输入类型=' text ' v-model=' age '/TD/tr/table v-son : son-name=' name ' : son-age=' age ' @ sza=' gg '/v-son/div模板id='son '子组件按钮/按钮表格边框='1 '单元格填充='0 '单元格间距='0' trtd colspan='3 '子组件数据/TD/tr TRT名称/tdtd { { Sonname } }/TDT输入类型=' text ' v-model=' Sonname '/TD/tr TRT页面/tdtd { { Sonange } }/TDT输入类型=' text ' v-model=' Sonange '/TD/tr/table g-son :g-name=' Sonname ' :g-age=' Sonange '/g-son/div/模板id='vgson' div按钮@click='gchan孙子组件按钮/按钮表格边框='1 '单元格填充='0 '单元格间距='0' trtd colspan='3 '孙子组件数据/TD/tr TRT名称/tdtd { { gName } }/TDT输入类型=' text ' v-model=' gName '/TD/tr TRT页面/tdtd { { GAge } }/TDT输入类型=' text ' v-model=' GAge '/TD/tr/table/div/template/body script src=' http :https://cdn。 bootscs。com/Vue/2。4 .4/Vue。量滴js '/script script var bus=1 con ST app=new Vue({ El : ' # app }，data:{ name:'keep '，age:'28' }，methods:{ gg(val1，val 2){ this。name=val 1 this。age=val 2 }，ff(){ bus .$on('suibian '，(val1，val 2)={ this。name=val 1；this.age=val2 }) } }，components : { ' VSon ' : { template : ' # son '，methods:{ sonChange(){ this .$emit('sza '，这个。SoName，this.sonAge) } }，prop :[' SoName '，' sonAge']，components : { ' GSon ' : { template : ' # vgson '，prop :[' gName '，' gAge']，methods:{ gchan(){ bus .$emit('suibian '，this.gName，this。gage)；},} } },} } } })/脚本/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可得如下运行效果：

希望本文所述对大家vue.js程序设计有所帮助。