Home  >  Article  >  Web Front-end  >  Detailed explanation of communication between Vue subcomponent and parent component

Detailed explanation of communication between Vue subcomponent and parent component

php中世界最好的语言
php中世界最好的语言Original
2018-05-16 16:26:042658browse

This time I will bring you a detailed explanation of the communication between the vue sub-component and the parent component. What are the precautions for using the vue sub-component to communicate with the parent component. The following is a practical case, let's take a look.

1. Communication between the parent component and the child component,
1. Pass in the attribute value
to the label of the inserted child component, as shown in the figure: Detailed explanation of communication between Vue subcomponent and parent component

2. Use props to receive in the sub-component,
As shown in the figure: Detailed explanation of communication between Vue subcomponent and parent component


##zhijeidiaoyo

Just call this.title directly;

2. The child component passes parameters to the parent component

Use this.$emit("parents",111) to listen to the parents
event, and directly bind the change method on the parent component, such as Figure:

Detailed explanation of communication between Vue subcomponent and parent component

3. Communication between subcomponents and subcomponents

1. First, create an event center in
main.js
Detailed explanation of communication between Vue subcomponent and parent component

2. The event triggered by subcomponent 2 is as follows

this.$root.event.$emit("NAME2","child2's data")
Detailed explanation of communication between Vue subcomponent and parent component

2017- 11-01_14512Detailed explanation of communication between Vue subcomponent and parent component

3. Subcomponent 1 receives the following

this.$root.event.$on("NAME2",function (d) {
huang.msg2 = d;
})

Detailed explanation of communication between Vue subcomponent and parent component

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles !

Related reading:

How to modify the scroll bar style

WOW.js to make the page move

The above is the detailed content of Detailed explanation of communication between Vue subcomponent and parent component. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Imitate disabled styleNext article:Imitate disabled style