Vue2.0 about event emission and reception between parent component and child component

This article mainly introduces the example code of event emission and reception between Vue2.0 parent component and child component. Friends who need it can refer to it. I hope it can help everyone.

Regarding the event emission and reception of vue2.0, everyone knows that $dispatch and $broadcast have been deprecated in vue2.0 and replaced by them. It is a more convenient and faster way to use the event center, through which components communicate with each other. No matter which layer the component is in, it can be achieved by instantiating an empty Vue. Prefecture:

# This is a small case written by myself. The function is to click the addition and subtraction button of the sub -component to control the number of parent components. The principle is that when the child component's plus or minus button is clicked, an event is distributed, and the parent component receives the event. I believe that everyone will have no problem with the html and css codes. I won’t go into details here. Let’s talk about the js part directly. First, add an empty Vue object named eventHub to the data when initializing the project. The function is to allow any component to call event emission and reception. method. The code is as follows:

Dispatching an event to the parent component when the plus button is clicked:

Because of the json I wrote The data is in two layers:

So the two-layer loop displays the data on the page. To accurately display the quantity of a certain food, you must know the first category and this For the index value of this food under the major category, the two indexes are first passed into the sub-component in the HTML, and then when the event is distributed, they are packaged together with the quantity into an object and sent to the parent component.

Remember that the child component must declare child and parent in props, and then the parent component receives the emitted countFunc:

At this time, console.log() the obj in countFunc passed by the child component. You will find that the parent component has received an object: Object {count: 1, index: 0, parent: 0 }, that is, when I click Apple’s plus button, the count is 1, which means the quantity is 1, the parent index is 0, which means it is the first category, and the index is 0, it means it is an apple under the first category. So far, it has been Implemented event emission and reception between parent and child components.

The complete code is as follows:

1. Parent component:

2. Subcomponents:

Related recommendations:

Detailed explanation of event binding using event emitter pattern in Node.js_node.js

The above is the detailed content of Vue2.0 about event emission and reception between parent component and child component. For more information, please follow other related articles on the PHP Chinese website!