Writing in the front

Recently learning VUE, VUE began to feel quite simple. But it was a little bit convoluted, really convoluted, and it took all afternoon to study the components. From a confused to gradually clear, decided to write a blog to deepen their understanding. This article is mainly about how to use components, and the parent component to the child component to pass data, the child component to the parent component to pass data these three parts. Hopefully it will also help you understand the components.

The beginning of the article

1. How to use components

Components are designed to improve code reuse and make code reusable. Components need to be registered before they can be used. There are two ways to register a component. One is global registration, the other is local registration.

1.1 Component global Registration

As the name implies, global is anywhere, meaning that globally registered components can be used in any instance of Vue.

• Case 1

Vue.component('my-component', {template:'
      

        Register component 
      
'
})
Copy the code

My-component is a user-defined component name. You can name it as you like.

Following the component options in braces, add template to the component options to display the content of the component on the page.

The content must be wrapped around a DOM element, such as the “registered component” above, which is wrapped around a set of divs.

1.2 Component Partial registration

Local components are valid only under the scope of the instance, as shown below

• Case 2

<div id="app">
        <my-component></my-component>
    </div>
    <script>
        var child = {
            template:' '<div> Locally register component </div>' '
        }
        var app = new Vue({
            el:'#app',
            components: {
                'my-comoponent':child
            }
        })
    </script>
Copy the code

Summary: The content after the template is the content of the component and will be displayed on the page.

2. The parent component passes data to the child component

2.1 Basic usage of father to Son

Before transferring data, we should know which component is the parent and which is the child. Globally, ‘<my-component></my-component>’ is the parent component that forwards data to the vue.component neutron component via prop.

There are two values for props. One is an array of strings, used to pass data. One is an object that validates props. The latter is easier to understand, and I’m going to focus on string arrays.

• Example 3

<div id="app">
        <input type="text" v-model= "parentMessage">
        <my-component :Message = "parentMessage"></my-component>
    </div>
    <script>
        Vue.component('my-component',{
            props:['message'],
            template: '<div>{{ message }}</div>'
        });
        var app = new Vue({
            el:'#app',
            data:{
                 parentMessage: ' '
            }
        })
    </script>
Copy the code

In the example above, the V-model in the text box is bound to the parentMessage in the data. When you enter information in the text field, the input content is bound to the Data parentMessage. The Message in the parent component is passed to the props in the child component, which then gets the Message property, which is displayed behind the template. The result is shown below.

2.2 What should be paid attention to when passing from father to son

In a child component, when you want to change the value of the data in it, you can’t change it directly; you should write the change in a data object or computed property computed.

In JavaScript, objects and arrays are reference types that refer to the same memory space. When props are objects and numbers, changing the value in the child component affects the value of the parent component. This is obvious when there are multiple parent components. If a value in a child component changes, all parent components change. We usually expect the parent components to be independent of each other.

You might see that the child component changes and the parent component changes as well and that might be interpreted as the child passing a value to the parent. They are not the same. The differences are as follows:

• Example 4

Example 4 does this by clicking the Add button and incrementing the number value by 1. When clicking a button triggers the click event, perform the increment function, munber++ directly inside the function to change the value. It can be done, but an error is reported and a message is given that props should be changed using data or computed. You can also copy the code below and try it out for yourself.

<div id="app"> <! -- v-bind passes the contents of the object to the child component --> <my-conponent v-bind="childrenInfo"></my-conponent>
    </div>
   <script>
        var app = new Vue({
            el:'#app',
            data: {
                childrenInfo: {
                    number:0
                }
            },
            components: {
                'my-conponent'// The number type is number props:{number: {type: Number
                        }
                    },
            
                    template:
                    '\ 
      

       \ 
       

        {{ number }}
       
\ 
       add\ 
      
'
                    ,
                    methods: {
                        handleClick() {
                            this.number++;
                        }
                    }
                }
            }
        })
    </script>
Copy the code

Warning in red:

4-2

<body>
    <div id="app"> <! -- v-bind passes the contents of the object to the child component --> <my-conponent v-bind="childrenInfo"></my-conponent>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                childrenInfo: {
                    number:0
                }
            },
            components: {
                'my-conponent'// The number type is number props:{number: {type: Number
                        }
                    },
                    data : function() {
                        return {
                            ownNumber: this.number
                        }
                   },
                    template:
                    '\ 
      

       \ 
       

        {{ ownNumber }}
       
\ 
       add\ 
      
'
                    ,
                    methods: {
                        handleClick() {
                            this.ownNumber++;
                        }
                    }
                }
            }
        })
    </script>
</body>
Copy the code

Example 4-2 Two changes have been made compared with Example 4. OwnNumber (props); ownNumber (props); ownNumber (props); ownNumber (props);

3. Child components pass data to parent components

The child component fires events via $emit, and the parent component can listen for the event to execute a function. The process of child to father is explained in detail through the fifth example.

• Case 5

<div id="app"> <p> total: {{total}}</p> < my-component@increase ='handeleGettotal'
       @reduce = 'handeleGettotal'></my-component>
   </div> 
   <script>
       Vue.component('my-component',{
           template: '\ 
      

       \ 
       +1\ 
       -1\ 
      
',
           data: function () {
               return {
                   counter:0
               }
           },
           methods: {
               handleIncrease :function() { this.counter++; / / by$emit() Passes the changed counter to the parent component this.$emit('increase',this.counter);
               },
               handleReduce :function () {
                   this.counter--;
                   this.$emit('reduce',this.counter);
               },
           }
       })
       var app = new Vue({
           el:'#app',
           data:{
              total:0
           },
           methods: {
               handeleGettotal: function(total) { this.total = total; }}})Copy the code

The result is shown in the figure. The initial total is 0. When Linglong clicks -1 three times, the result changes to -3.

We can see that the parent component’s @increase=”handleGetTotal” is listening for the increase event and executing the handleGetTotal function; $emit(‘increase’,this.counter) passes the second parameter this.counter to the total of the handleGetTotal function in the app. The child completes the process of passing data to the parent.

To summarize, the child component passesThe first argument to the emit function is the name of the event to fire, and the subsequent arguments are passed as arguments to the function to be executed after the child component listens for the event.

End of article

After reading this article, you should know how to create components and how information is passed between parent and child components. Linglong just began to read the book is still not clear which is the parent component, which is the child component, feel special around, in fact, after seriously clear back to look at it is not so complicated. Reading and learning must not only read a book should also be the example of a knock, carefully try to figure out, and finally there will be a harvest.