Vue.js Parent-child component communication development example _JAVASCRIPT skills

Vue.js is a library that builds a data-driven Web interface. The goal of Vue.js is to implement the data binding and combined view components of the response with as simple an API as possible. (This is an official explanation!) ）

Small series did not use Angularjs, also did not use react.js, can not elaborate the difference between the three, want to understand the words, in the official have an analysis, please click here to view

Small series of the front-end development also has more than a year, the beginning of time, the front-end development of the technology to show too much, small set powerless, take into account, after understanding, or chose to learn the original JS merger jquery learning on the road. Small part of the use of vue.js, but also because of business needs, why not choose Angularjs, in fact, can not abandon the jquery,vue.js and jquery is perfect compatibility, because this project, small series is also bitter forced for a long time, constant overtime and learning, to avoid the development of the project time increase, not much nonsense Said, the following start some small series of Vue learning Summary, write not good, also don't take offense, write the article has been my short board ....

The parent chain is Vue here, which is the instance of the parent chain

A subassembly can be this.parent by its parent component. The root instance can use This.root to access it. The parent has an array of This.children, all of its elements; Of course, in the project, our component can not have only one or two, when the component is more, we are difficult to remember the location of the component in children, we can use the V-REF instructions, Create a hook for our component, this hook, that's our other component. Index when accessing the component

This is one of my components
<msg v-ref:msgs></msg>//This time, we have established a MSGS index for this MSG component
//We can access the component
var vm = new Vue ({}); 
var children = vm. $refs. msgs//access to our subcomponents in this way
//v-ref is an array or object, a collection of components that we establish all ref hooks

Here, for you to see a picture, look at the Parent,children, $refs related content (as if the picture is a little fuzzy, not the whole dynamic diagram, embarrassed, see not clear, we can build a demo to print out well!)

Although we can directly access the components within the entire instance, this is not recommended, however, because the child component directly modifies the state of the parent component, which is very bad, allowing the parent-child component to be tightly coupled, ideally, each component can only modify its own state, because each component's scope is independent;

In this case, Vue also brings us their custom events

The event is distributed using $dispatch (), and the event bubbles along the parent chain;

Using the $broadcast () broadcast event, the event is transmitted downward to all descendants.

Look, it's kind of abstract, just an example, that's a lot to understand.

$dispatch () bubbling case <!--instance--> <div id= "App" > <!--Component Newsletter--> <section> <div class= "Mas-arry" &G
T <label for= "" >msg Data: </label>{{msg} </div> <!--subassembly--> <msg></msg> </section > </div> <template id= "msg" > <div class= "INP" > <input type= "text" v-model= "msg" > <a href= " javascript:; "@click =" Add_data "> Add </a> </div> </template> <script> vue.component (' msg ', { Here directly using the registration component of the syntax of the method of sugar registration, simple and quick template: ' #msg ', data:function () {return {msg: ' abc '}}, methods: {add_data:function ( ) {//When clicked on this event, triggers the $dispatch () method; Add_msg is the method of listening subcomponents created by the parent component, meaning that this method of telling the parent component, Dad, I update the data, par_msg is my updated data, you also quickly update it!
Pass the PAR_MSG data to the parent component Update!
var par_msg = This.msg.trim (); this. $parent. Add (par_msg); This is the way to directly manipulate the parent component this. $dispatch (' add_msg ', par_msg);
This method is to use the way of event propagation this.msg = ';
}
}
}); var MVVM = new Vue ({el: ' #app ', data: {msg: [' SGSG ']}, Events: {///Create an event that listens to the corresponding child component ' add_msg ': function (msg) {//ADD_msg is a method for listening to subcomponents, when receiving notification of subassemblies, updates the data of the handle component, where MSG is the Par_msg this.msg.push (msg) of the subassembly;
}, Methods: {add:function (msg) {This.msg.push (msg);}}}); </script>

After reading this piece of code, I believe we all know $dispatch () the use of bubbling, in fact, is such a thing, there are two parameters, the first parameter, is the parent component listening to the subcomponents of the events object inside a method name, the two should be consistent; The second parameter is the data of the child component Update, It is also the data that is passed to the parent component to synchronize updates, and the parent component uses this parameter to do the appropriate action

The usage of the $broadcast () method is the same as that of $dispatch (), and the difference is that the event object is created inside a subassembly and the opposite triggers the function in the parent component; To say, if the child component's data is completely dependent on the parent component's data, You do not need to use the way to pass the event, you just need to get the data of the parent component by props and bind to the subassembly.

<!--component Communication two $broadcast () method--> <section class= "SEC" >