<!doctype html> <html> <head> <meta charset="utf-8"> <title>componentchildtoparentcommunication</title> <script src="js/vue.js"></script> </head> <template id="parentcomp"> <p> i am parent component:{{msg}},the data from child:{{msg1}},{{msg2}} <hr> <child :m1="msg1" :m2="msg2"></child> </p> </template> <template id="childcomp"> <p>i am child component:{{msg}}</p> </template> <body> <script> let child={ template:'#childcomp', data(){ return { msg:'child data' } }, props:['m1','m2'] }; let parent={ template:'#parentcomp', data(){ return { mgs:'parent data', msg1:'the first parent data', msg2:'the second parent data' } }, components:{ child }, }; window.onload=function(){ new vue({ el:'#app', components:{ parent } }); } /*子元素向父元素通信关键总结： 1：子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据 2：在嵌套的子元素(使用时)上：<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>; */ </script> <p id="app"> <parent></parent> </p> </body> </html>
以上就是vue.js组件的通信之子组件向父组件的通信（代码）的详细内容。