Home > Developer > Web Develop
We know that in the Vue component, the parent component passes the array to the subassembly, usually by using props, and Vue rules that the prop can only be passed in one direction, so how can the child component achieve the upward passing of the data, quoting a concept here: " Parent-Child component relationships: Prop down, events up , and in the previous article, the event methods used for data up-passing $emit () are also described in detail, and children's shoes that do not understand can be turned back and looked at. Here's what we're going to talk about today. The problem of communication between parent and child components is as follows:
The code is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1" /> <title>Session</title> <Scriptsrc= "Https://unpkg.com/vue/dist/vue.js"></Script> <styletype= "Text/css">#session{width:600px;margin:0 Auto;text-align:Center; } </style> </Head> <Body> <DivID= "Message-event-example"class= "Demo"> <Blog-postPost-title= "Hello!"@father= "Handlemessage"></Blog-post> </Div> <Script>Vue.component ('Blog-post', {props: ['Posttitle'], Template:'', Data:function(){ return{message: This. Posttitle}}, methods:{Takeme:function() {alert ("I'm a subcomponent ."); This. $emit ("Father", {message: This. Message}) } } }) NewVue ({el:'#message-event-example', data: {messages: []}, methods: { Handlemessage:function(payload) {alert ("I am the parent component", Payload.message); } } }) </Script> </Body></HTML>
Here's how to write this in the parent component:
So, in order to take the message that receives the parent component down, it is more obvious that, in the data function of the component, a property message is created to hold the passed data and then print the data through the alert form through the event $emit. Convenient and intuitive to understand the feelings, how (⊙_⊙), is not understanding the parent-child component communication mechanism.
Vue.js Learning Notes (4)-the first way to communicate between parent and child components props and $emit
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
