Vuejs Tenth Vuejs Parent-child component communication _javascript skills

This article is a small series combined with official document collation of a more detailed, more complete code tutorials, very good, more suitable for beginners to read.

This information is available in the Official document:

Http://cn.vuejs.org/guide/components.html

Parent-Child Component communication

① access to subassemblies, parent components, root components;

this. $parent access to the parent component

this. $children Access subcomponents (is an array)

this. $root the descendants of the root instance to access the root instance

Sample code:

<div id= "App" > 
parent component: 
<input v-model= "val" ><br/> 
subassembly: 
<test:test= "val" > </test> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
val:1 
components: { 
test: { 
props: [' Test '], 
Template: "<input @keyup = ' findparent ' V-model = ' Test '/>, 
methods: { 
findparent:function () { 
Console.log (this. $parent);//access Root component 
Console.log (this. $parent. val); Access the Val attribute of the root component 
Console.log (this. $parent. $children. IndexOf (this));//View whether the index Console.log is currently found in the subcomponents of its parent component 
( this. $parent = = this. $root); View whether the parent component and root component are congruent (because his parent component is the root component)}}}} 
); 
</script>

When the input box key of the subassembly is bounced, the display is as follows:

The value of the parent component's input box (the default is 1), 0 (representing the first element in the parent component's Children property), True (because the parent component is the root component, so it is congruent);

In this way, you can interact in the component tree.

② Custom Events:

First, the event needs to be placed in the events attribute, rather than in the methods attribute (a novice can easily make an error), only the events in the events property are triggered, and the events in the methods property cannot be triggered.

Second, there is a difference between distributing up and down broadcasting: the upward distribution will trigger the event of its own name, and the broadcast down will not;

Third, the up and down broadcasts default only to events that trigger a direct (child or parent, excluding ancestors and grandchildren), and continue on this line unless the event return value is true.

Four, an event cannot be invoked explicitly by this. Event name.

Sample code:

<div id= "App" > Parent component: <button @click = "Parentclick" > Click to propagate broadcast</button> <br/> subassembly 1: <ch Ildren1></children1> <br/> Another sub-component 1: <another-children1></another-children1> </div > <script> var vm = new Vue ({el: ' #app ', data: {Val:1}, methods: {parentclick:function () {this.$ 
Broadcast ("Parentclick", "abc"); 
}, Events: {childrenclick:function () {Console.log ("childrenclick-parent"); 
}, Parentclick:function () {Console.log ("parentclick-parent"); 
return true; }, components: {children1: {//This has no return value, will not continue to distribute props: [' Test '], Template: "<button>children1</button>&lt ;/br> subassembly 2:<children2></children2> ", events: {childrenclick:function () {Console.log (" 
Childrenclick-children1 "); 
}, Parentclick:function (msg) {Console.log ("parentclick-children1"); 
Console.log ("message:" + msg); }, components: {children2: {props: [' Test '], Template: "<button @click= ' findparent ' >children-Click</button> ', methods: {findparent:function () {this. $dispatch (' 
Childrenclick '); 
}, Events: {childrenclick:function () {Console.log ("childrenclick-children2"); 
}, Parentclick:function (msg) {Console.log ("parentclick-children2"); 
Console.log ("message:" + msg); }}}, AnotherChildren1: {//This is the return value of true and will continue to distribute props to subcomponents of subassemblies: [' Test '], Template: "<button>anotherchildre n1</button></br> another subassembly 2:<another-children2></another-children2> ", events: {ChildrenClick 
: function () {Console.log ("childrenclick-anotherchildren1"); 
return true; 
}, Parentclick:function (msg) {Console.log ("parentclick-anotherchildren1"); 
Console.log ("message:" + msg); 
return true; }, components: {anotherChildren2: {props: [' Test '], Template: "<button @click = ' findparent ' >anotherchildren2 
-click</button> ", Methods: {findparent:function () {this. $dispatch (' Childrenclick '); }, Events: {childrenclick:function () {Console.log ("childrenclick-anotherchildren2"); 
}, Parentclick:function (msg) {Console.log ("parentclick-anotherchildren2"); 
Console.log ("message:" + msg); 
} 
} 
} 
} 
} 

} 
}); 
</script>}, Parentclick:function () {Console.log ("parentclick-anotherchildren2"); 
} 
} 
} 
} 
} 

} 
});  </script>

Description

"1" Clicking on the parent component's button will broadcast down, then trigger the subassembly 1 itself, another subassembly 1, and another subassembly 2;

"2" Click on the Child Component 2 button, will trigger the child component 2 event and subassembly 1 event, but does not trigger the parent component's button;

"3" Clicking on another subassembly 2 button triggers another subassembly 2 event, another subassembly 1 event and the parent component event (because the return value of the event for another subassembly 1 is true);

③ custom events using v-on binding:

"1" In simple terms, when a child component triggers an event (the method in the events), the parent component also executes a method (the method in the parent component methods).

The binding triggered by "2" is written in the template (that is, the template template being replaced), you can bind the method of a parent component to the events of multiple child components, or a method that binds different parent components to things of different subcomponents, but cannot bind multiple parent components to the same child component event.

The "3" subassembly distributes the parameters of the message pass, even if the child component's event has no parameters and does not affect the method that passes the parameter to the parent component (that is, the parent component's method can accept the parameters obtained by the subassembly method)

As an example:

 <div id= "app" > Parent component: <button> Click down to propagate broadcast</button> <br/> subassembly 1: < !--binding is written here, you can bind the same one, or different bindings differently, but you cannot bind multiple--> <children v-on:test= "parent" @test2 = "another" ></children > </div> <script> var vm = new Vue ({el: ' #app ', data: {Val:1}, methods: {parent:function (AR 
g) {Console.log (ARG); 
Console.log ("The The" the "the" the "the"; test event); 
}, Another:function () {Console.log ("another Method"); }, components: {children: {//This no return value, will not continue to distribute props: [' Test '], Template: "<button @click = ' Childclick ' >children 1</button></br><button @click = ' childClick2 ' >children1</button> ', methods: {childclick: 
function () {this. $emit ("Test", ' the argument for Dispatch '); 
}, Childclick2:function () {this. $emit ("Test2"); 
}, Events: {test:function () {console.log ("test"); 
}, Test2:function () {Console.log ("test2"); 
} 
} 
} 
} 
}); </script> 

④ Sub-component Index

In simple terms: it is possible to get the subcomponents directly from the index, and then you can invoke the methods of each subassembly.

To add an index method: add V-ref to the tag: index name

The calling component method is: VM. $ref. Index name

You can also use this. $ref. Index name directly in the parent component

At this point, you can get the component and then use the component to call his or her data.

Sample code:

<div id= "App" > 
parent component: 
<button @click = "Todo" > Trigger subassembly Event </button> 
<br/> 
subassembly 1: 
<!--binding written here, can be multiple bindings of the same one, or different bindings different, but not one binding multiple--> 
<children v-ref:child></children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
methods: { 
todo:function () { This 
. $refs. Child.fromparent ();//Fromparent method} for calling subcomponents via 
index 
components: { 
children: {/ /This no return value, will not continue to distribute 
props: [' Test '], 
Template: "<button>children1</button>", 
methods: { 
Fromparent:function () { 
Console.log ("Happened fromparent by ref"); 
}}} 
); 
</script>

The above is a small set to introduce the Vuejs tenth Vuejs Parent-child component communication, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!