Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>componentChildToParentCommunication</title>
<script src= "Js/vue.js" ></script>
<template id= "Parentcomp" >
<div>
I am Parent component:{{msg}},the Data from CHILD:{{MSG1}},{{MSG2}}
<child:m1= "MSG1" m2= "MSG2" ></child>
</div>
</template>
<template id= "Childcomp" >
<div>i am Child component:{{msg}}</div>
</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
}
});
}
/* child element communication to Parent element key summary:
1: Child element definition props:[' msg1 ', ' msg2 ', ' MSG3 ',...], used to place the data taken from the parent element
2: On nested child elements (when used): <child:msg1= "Parent Data 1": msg2= "Parent Data 2": msg3= "parent Data 3" ></child>;
*/
</script>
<div id= "App" >
<parent></parent>
</div>
</body>
Communication to the parent component of the communication sub-component of the Vue.js component
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
