Vue component communication sub-and parent-details (2) vue component communication details

Vue component communication sub-and parent-details (2) vue component communication details

Then, the vue component will continue to learn about the parent-child communication.

2. Communication between components (sub-components pass values to parent components)

Data transmission is completed through events.

① Define a method in the parent component to receive values from the event passed by the Child component

Methods: {recvMsg: function (msg) {// the msg parameter is the data generated by the Child component through the event }}

② Bind event processing functions

Generally, events are custom events.

<child-component @myEvent="recvMsg"></child-component>

③ Trigger an event on the child component

Event name, value: this. $ emit ('myevent', myPhone) // triggers an event called myEvent, and transmits the second parameter data to the corresponding processing function of the event.

Summary:

In Vue, the relationship between parent and child components can be summarized as props down and events up. The parent component transmits data downward to the child component through props, and the child component sends messages to the parent component through events.

<! Doctype html> 
Put an input in the child component, and click the button to send the user input content to the parent component.
<! Doctype html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.