The parent component of Vue. js communicates with the parent component and the parent component of vue. js.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> componentParentChildCommunication </title>
<Script src = "js/vue. js"> </script>
</Head>
<Template id = "parentComp">
<Div>
I am parent component :{{ msg }}, The Data from child :{{ msg2 }}
<Hr>
<! -- <Child @ Custom Event name = "parent method"> </child> -->
<Child @ child = "parentFn"> </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'
}
},
Mounted (){
/* This. $ emit ('custom event name', data );*/
This. $ emit ('child ', this. msg );
}
};
Let parent = {
Template: '# parentComp ',
Data (){
Return {
Msg: 'parent data ',
Msg2 :''
}
},
Components :{
Child
},
Methods :{
ParentFn (data ){
This. msg2 = data;
}
}
};
Window. onload = function (){
New Vue ({
El: '# app ',
Components :{
Parent
}
});
}
/* Key summary of the parent element's communication to the child element:
1: On the nested child element (when used): <child @ Custom Event name = "parent method"> </child>;
2: add a sub-element method to the loaded hook function (mounted): this. $ emit ('custom event name', data );
3: Method on the parent element: parent method name (data ){...}
*/
</Script>
<Div id = "app">
<Parent> </parent>
</Div>
</Body>
</Html>
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
