vue.js is a library for building data-driven web interfaces. The goal of Vue.js is to implement responsive data binding and combined view components through the simplest API possible. (This is an official explanation!)
The editor has never used angularjs, nor has react.js been used. I cannot explain the differences in the three in detail. If you want to know, there is an official analysis. Please click here to view it.
The editor has been engaged in front-end development for more than a year. At the beginning, there were too many technologies in front-end development. The editor was powerless and couldn't take into account. After understanding, he chose to learn the learning path of learning from native js basic mergers and jquery. The editor uses vue.js because of business needs. Why don’t you choose angularjs? In fact, you can’t abandon jquery at the same time. vue.js and jquery can be perfectly compatible. Because of this project, the editor has been working overtime for a long time and constantly studying to avoid the increase in project development time. Without further ado, let’s start some of the editor’s Vue learning summary. If you don’t write well, don’t be accustomed to it. Writing articles has always been my weakness. . . .
Here is the example of vue, as the parent chain
The child component can be passed this.parent its parent component. The root instance can be accessed using this.root. The parent has an array this.children, and all its elements; of course, in the project, our components cannot have only one or two. When there are too many components, it is difficult for us to remember the location of the component in children. We can use the v-ref directive to create a hook for our component. This hook is the index when our other components access the component.
//This is one of my components <msg v-ref:msgs></msg> //At this time, we have established an index of msgs for this msg component//We can access the component var vm = new Vue({}); var children = vm.$refs.msgs //Access our child components in this way//v-ref is an array or object, which is a collection of components that we create all ref hooks.Here, I will show you a picture and take a look at the content related to parent, children, and $refs (it seems that the picture is a bit blurry and it won’t be a complete dynamic picture. It’s embarrassing and can’t see clearly. You can create a demo and print it out!)
Although we can directly access the components in the entire instance in this way, it is not recommended to do so, because it is very bad for children to directly modify the state of the parent component, which will make the parent and child components tightly coupled. Ideally, each component can only modify its own state because the scope of each component is independent;
In this case, vue also brings us their custom events
Use $dispatch() to dispatch events, and the events bubble along the parent chain;
Use $broadcast() to broadcast events, and events are transmitted down to all descendants.
It looks a bit abstract, it's easier to understand with an example
//$dispatch()Bubble Case<!-- Example--><div id="app"><!-- Component Communication 1--><section> <div><label for="">msg data:</label>{{ msg }} </div><!-- Subcomponent--><msg></msg></section></div><template id="msg"><div><input type="text" v-model="msg"><a href="javascript:;" @click="add_data">Add</a></div></template><script>Vue.component('msg',{ //The syntax sugar is used to register the component directly, and the simple and shortcut template: '#msg',data: function() {return {msg : 'abc' }},methods: {add_data: function(){ //When clicking this event, the $dispatch() method will be triggered; add_msg is the method created by the parent component to listen to child components, which means to tell the parent component this method, Dad, I have updated the data, par_msg is the data I updated, you can update it too! Pass the par_msg data to the parent component for update! var par_msg = this.msg.trim();// this.$parent.add(par_msg); //This method is to directly operate the parent component this.$dispatch('add_msg', par_msg); //This method uses the event propagation method this.msg = '';}}});var mvvm = new Vue({el: '#app',data: {msg : ['sgsg']},events: { // Create an event that listens to the corresponding response subcomponent 'add_msg': function(msg){ // add_msg is a method used to listen to the subcomponent. When receiving notification from the subcomponent, the data updated by the subcomponent is updated. Here msg is the subcomponent's par_msgthis.msg.push(msg);}}});</script>After reading this code, I believe everyone knows the usage of $dispatch(). In fact, there are two parameters in it. The first parameter is that the parent component listens to a method name in the events object of the child component. The two must be consistent; the second parameter is the data updated by the child component, which is also passed to the data to be updated synchronously to the parent component. Then the parent component uses this parameter to perform corresponding operations.
//The usage of the $broadcast() method is the same as that of $dispatch(). The difference is that the event object is created in the child component, and the function triggered on the parent component is on the contrary. What we want to say here is that if the data of the child component completely depends on the data of the parent component, then there is no need to use the general event delivery method. You only need to obtain the data of the parent component through props and bind it to the child component.
<!-- Component Communication 2 $broadcast() method--><section><h3>Data source added by the parent component: </h3><div><label for="">id:</label><div><input type="text" v-model="id"></div></div><div><label for="">Name:</label><div><input type="text" v-model="name"></div></div><div><label for="">Host:</label><div><input type="text" v-model="inst"></div></div><div><label for="">Host:</label><div><input type="text" v-model="inst"></div></div><div><label for=""></label><div><a href="javascript:;" @click="add_table">Add</a></div></div><h3>The following table is the child component information:</h3><!-- Bind the parent component's table_data data to the child component--><broadcase :data="table_data"></broadcase></section><template id="broadcase"><div><table><thead><tr><th>id</th><th>Name</th><th>Hobbies</th></tr></tbody><tr v-for="list in data"><td>{{ list.id }}</td><td>{{ list.name }}</td><td>{{ list.inst }}</td></tr></tbody></table></div></template><script>Vue.component('broadcase',{ //This is the syntax sugar used to register the component, and the simple and shortcut template: '#broadcase',props: ['data'], // props are used to accept the parameters of the parent component, and can also customize the data. If the data needs to have a default value, you need to define data in data: function() {return {msg : 'abc' }},events : { //This is just an example, the child component listens for the data changes of the parent component test : function(msg){console.log(msg);}},methods: {}});var mvvm = new Vue({el: '#app',data: {table_data: [{id: 1,name: 'gjei',inst: 'gjweir'},{id: 2,name: 'jiuyer',inst: 'oiuyt'}] },methods: {add_table: function(){var set = {id: this.id,name: this.name,inst : this.inst};this.table_data.push(set);// this.$broadcast('test', set); // Here, it is just an example syntax this.id = '';this.name = '';this.inst = '';}}});</script>You can click here to test the two examples mentioned above. The file has been uploaded to the personal space vue parent-child component communication demo
When I finished writing this, I looked back and saw that the content I wrote seemed to be a bit messy, which was really ashamed! I thought about writing a blog and building my own notes library a long time ago, but when I tried to write it before, I really couldn't do it. Recently, I have made up my mind to insist on writing no matter how I write it. What if my writing style suddenly gets better one day!
In fact, application is not very difficult. It actually provides corresponding API interface monitoring. How to operate and change the actual project application still needs to be written by ourselves. The key is to improve our js level. After all, there are more and more complex web applications! I hope that students who like front-end can encourage each other on the road to js.