This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

[props] [props]

  1. 【 Key 】 Parent component passes data to child component: throughattributeTransfer data; Child component throughpropsReceive data.
<div id="root">
       <counter :count="0"></counter>
</div>
var counter = {
        props: ['count'],
        template: '<div>{{count}}</div>'
}

var vm = new Vue({
        el: "#root",
        components:{
                counter: counter
        }	
})
Copy the code

The parent component passes data named XXX to the child component in the form of a property;

The child component uses props: [‘ XXX ‘] to receive this data. The child component uses the passed data in the template.

2. Child component passes value to parent component (via event ($emit))

Scenario requirement: Implement a counter, incrementing each time by 2, and sum.

The problem requires that the child component call the parent’s summation method every time it clicks.

This.$emit(‘ event ‘, step) notifies the parent of the new parameter value. The parent component adds a listener event to the DOM tag of the page template, @event name =” execution method name “, so that once the child component makes a change, the parent component can listen to the change and make the corresponding change on the page.

<div id="root">
        <counter :count="0" @add="handleAdd"></counter>+
        <counter :count="0" @add="handleAdd"></counter>=
        <div>{{total}}</div>
</div>
var counter = {
    props: ['count'],
    template: '<div @click="handleClick">{{count}}</div>',
    methods: {
            handleClick: function() {
                    this.number = this.number + 2,
                            this.$emit('add', 2)
            }
    }
}
var vm = new Vue({
    el: "#root",
    data: {
            total: 0
    },
    components: {
            counter: counter
    },
    methods: {
            handleAdd: function(step) {
                    this.total += step
            }
    }
})
Copy the code

Problem analysis: when clicking on the value is not implemented since the function of increasing 2, this is because the child components do not directly modify the data passed by the parent component.

Vue unidirectional data flow. The parent component can pass parameters to the child component in the form of properties, and the passed parameters can be modified at any time. However, the child component cannot modify the parameters passed by the parent component. !!!!!!!!! Only data passed by the parent component!!

The reason is that the child component receives data from the parent component, not a data type of the underlying type, but a data type of a reference type such as Object. If you modify the data of the reference type, when using a child component, you will cause the other child components to receive the data incorrectly.

Solve the problem of unidirectional data flow: the child component receives data from the parent component and makes a copy of the received data and puts the number in the data defined by the child component (which is a copy of the data). You can use this. Number ++ in the methods of the child component to accumulate data.

var counter = {
        props: ['count'],
        data: function() {
                return {
                        number: this.count
                }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods: {
                handleClick: function() {
                        this.number = this.number + 2,
                                this.$emit('add', 2)
                }
        }
}
Copy the code

Vue unidirectional data flow and bidirectional data binding

In fact, these two concepts are different, bidirectional binding is the model changes the view automatically updates, the view changes the model automatically updates; When a parent component passes a value to a child component, the child component cannot change the value. If the parent component changes the value, the child component will also be affected. The influence is one-way, only from the parent to the child component, not the other way around.

1. Unidirectional data flow

Unidirectional data flow means that changes in data can only be made in one direction. It refers to the flow of data between components.

For example, a parent component has two child components, one and two. The parent component passes data to the child component. Both components receive the data from the parent component and modify the data from the parent component in component 1. The values of child components 2 and parent components do not change. This is a one-way data flow, and the child component cannot directly change the state of the parent component. However, if the parent component changes the corresponding data, the data of the two child components will also change accordingly.

2. Two-way data binding

By the MVVM framework implementation, MVVM composition: View, ViewModel, Model. View and Model can not communicate directly, to communicate through the ViewModel.

For example, when part of the Model Data changes, the ViewModel notifies the View layer to update the View because the Vue Data Binding binds the underlying Data to the Dom layer. Changes in the View are also synchronized to the Model. Synchronization between the View and the Model is completely automatic, with no manual manipulation of the DOM.