Communication between vue components and parent-child components

1. How to use components
1.1 Global

Component is mainly to improve code reusability and make code reusable. Components need to be registered before use. There are two methods to register components. One is global registration and the other is local registration.

Vue.component('my-component',{
    template: '<div>Register components</div>'
})

Where my component is a user-defined component name, which can be named arbitrarily. The form of lowercase minus sign division is recommended. The content in the following braces is the component option. Adding template to the component option can display the content of the component in the page. Its content must be wrapped by dom elements. For example, the above "registration component" is wrapped by a set of div.

1.2 local
Local components are only valid under the scope of the instance. The specific code is as follows

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

Summary: the content behind the template is the content of the component, which will be displayed in the page.

2. Transfer data from parent component to child component
2.1 basic usage of parent to child

Before transmitting data, we should first know which is the parent component and which is the child component. Take the global, where '< My component > < / my component >' is the parent component, and the parent component forwards data to Vue.component sub components through prop.

There are two kinds of props values. One is string array, which is used to transfer data; One is an object, which is used to verify props. The latter is easy to understand. Here we mainly talk about the form of string array.

<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>

In the above example, v-model in the text box is bound to parentMessage in data. When you enter information in the text box, the entered content will be bound to the parentMessage in data. The message in the parent component is passed to the props in the child component, and the child component obtains the message attribute, which will be displayed through the template. The results are shown in the figure below:

2.2 what the father should pay attention to when passing on the son

In subcomponents, when you want to change the value of the data, you can't change it directly. You should write the change process in the data object or the calculated attribute.

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

3. Transfer data from child component to parent component
The child component triggers an event through $emit. The parent component can listen to the triggered event and execute a function. Through the fifth example, explain the process of son to father in detail.

<div id="app">
       <p>total:{{ total }}</p>
       <my-component 
       @increase = 'handeleGettotal'
       @reduce = 'handeleGettotal'></my-component>
   </div> 
   <script>
       Vue.component('my-component',{
           template: '\
           <div>\
               <button @click = "handleIncrease">+1</button>\
               <button @click = "handleReduce">-1</button>\
           </div>',
           data: function () {
               return {
                   counter:0
               }
           },
           methods: {
               handleIncrease :function () {
                   this.counter++;
                   //Pass the changed counter to the parent component through $emit()
                   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;
               }
           }
       })