This article is a more detailed and comprehensive tutorial compiled by the editor in combination with official documents. It is very good and is more suitable for beginners to read.
This article comes from the official document:
http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1
Parent-child component communication
① Access child components, parent components, and root components;
this.$parent Access parent component
this.$children accesses child components (is an array)
This.$root The descendant of the root instance accesses the root instance
Sample code:
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <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 the root component console.log(this.$parent.val); //Access the root component's val property console.log(this.$parent.$children.indexOf(this)); //Check whether the index console.log(this.$parent === this.$root); //Check whether the parent component and the root component are congruent (because its parent component is the root component) } } } } } }); </script>When the keys pop up in the input box of the subcomponent, the displayed contents are:
The value of the input box of the parent component and the parent component (the default is 1), 0 (represents that it is the first element in the child attribute of the parent component), and true (because the parent component is the root component, it is congruent);
In this way, interaction can be performed in the component tree.
②Custom events:
First of all, events need to be placed in the events property rather than in the methods property (a mistake that novices are likely to make). They can only trigger events in the events property, while events in the methods property cannot be triggered.
Secondly, there is a difference between upward distribution and downward broadcast: upward distribution will trigger an event of the same name, while downward broadcast will not;
Third, upward distribution and downward broadcasting will only trigger events for direct lines (children or parent, excluding ancestors and grandchild) by default, and will continue on this line unless the event return value is true.
Fourth, the event cannot be called explicitly through this. event name.
Sample code:
<div id="app"> Parent component: <button @click="parentClick">Click to propagate broadcast downward</button> <br/> Child component 1: <children1></children1> <br/> Another child 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 and will not continue to be distributed props: ['test'], template: "<button>children1</button></br>Subcomponent 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 is true, and it will continue to distribute props to the child components of the child component: ['test'], template: "<button>anotherChildren1</button></br>Another child component 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); } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } } }illustrate:
【1】Click the button of the parent component, and it will broadcast downwards, and then trigger the child component 1 itself, another child component 1, and another child component 2;
【2】Clicking the button of child component 2 will trigger the event of child component 2 and the event of child component 1, but will not trigger the button of parent component;
【3】Clicking the button of another child component 2 will trigger the event of another child component 2, the event of another child component 1 and the event of the parent component (because the return value of the event of another child component 1 is true);
③ Use v-on to bind custom events:
[1] Simply put, when a child component triggers an event (the method in events), the parent component will also execute a method (the method in parent component methods).
[2] The triggered binding is written in the template (that is, the template template that is replaced). Multiple child components can bind a parent component method, or different child components can bind a different parent component method, but the same child component event cannot bind a method.
【3】 The child component dispatches parameters for message passing. Even if the event of the child component has no parameters, it does not affect the method of passing the parameters to the parent component (that is, the method of the parent component can accept parameters obtained by the child component method)
As an example:
<div id="app"> Parent component: <button>Click to propagate broadcast</button> <br/> Child component 1: <!--Binding is written here. Multiple bindings can be bound to the same one, or different bindings are different, but multiple cannot be bound to one--> <children v-on:test="parent" @test2="another"></children> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parent: function (arg) { console.log(arg); console.log("the first method with test event"); }, another: function () { console.log("another method"); } }, components: { children: { //This has no return value and will not continue to be distributed props: ['test'], template: "<button @click='childClick'>children1</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>④ Subcomponent index
Simply put: you can directly obtain subcomponents from the index, and then you can call the methods of each subcomponent.
The method to add index is: add v-ref to the tag: index name
The method of calling the component is: vm.$ref. Index name
You can also use this.$ref. index name directly in the parent component
At this time, you can obtain the component, and then the component can call its methods or use its data.
Sample code:
<div id="app"> Parent component: <button @click="todo">Events triggering child component</button> <br/> Subcomponent 1: <!--Binding is written here. Multiple bindings can be bound to the same one, or different bindings are different, but multiple cannot be bound to one--> <children v-ref:child></children> </div> <script> var vm = new Vue({ el: '#app', methods: { todo: function () { this.$refs.child.fromParent(); //Calling the child component's fromParent method through index} }, components: { children: { //This has no return value and will not continue to distribute props: ['test'], template: "<button>children1</button>", methods: { fromParent: function () { console.log("wappened fromParent by ref"); } } } } } } } }); </script>The above is the Vuejs article 10th Vuejs parent-child component communication introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!