这篇文章介绍vue.js组件的通信之子组件向父组件的通信（代码）
<!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组件的通信之子组件向父组件的通信（代码）的详细内容。