First, what is a single data stream?

We all know that Vue is a one-way data flow between components. Children components can’t access data from their parent components directly. They can only pass data from the parent component to the child components using the props property. And the child component cannot directly modify the data passed by the parent component to the child component. (Props is read-only)

After you have a general understanding, go straight to the code and see how to use it.

<div id="app">
        <h2>{{age}}</h2>
        <my-label v-bind:a="age" b="hello" :c="age >= 18? 'Mature ':' minor '"/>
    </div>

 <script>new Vue({ el: '#app', data: { age: 15 }, components: { 'my-label': This.props. A props: ['a','b','c'], data: () => ({name: 'my-label' }), template: `<div>
                        <p>a:{{a}}</p>
                        <p>b:{{b}}</p>
                        <p>c:{{c}}</p>
                        <child-a v-bind:name="name" :rootage="a"></child-a>
                    </div>
                    `,
                    components: {
                        'child-a': {
                            props: ['name','rootage'],
                            template: '<div>I am childA the name of the parent component is{{name}} rootAge{{rootage}}</div>'}}}}})</script>
Copy the code

From this code we know that new Vue() is the parent component. The age in data is passed to the child component by means of props. The use of this function is bound to the component tag by v-bind (abbreviated as a colon:). So you can get the data from the parent component. However, the data is read-only and cannot be modified directly. Then there is a question, do we want to modify? What to do, right?! Hence the concept of backpass values. Now let’s see what is backpass value!!

Reverse the value

Concept: Because Vue is a single data flow, the rules allow only a parent component to pass state to a child component, and do not allow the child component to directly modify the state passed from the parent component. Vue provides a custom event API. The parent component listens for custom events from the child component. When the child component wants to change the state of the parent component, the custom event is triggered by the $emit method. The parent component’s callback function that listens for the child’s custom event is fired, and the parent component’s own methods modify their state accordingly. The props for the child component will be updated

Syntax: $emit(' custom event name ', pass argument to parent component callback)

Note: $emit only accepts two arguments: argument 1 (custom) the name of the event that triggers the parent listening, and argument 2 (optional) the argument passed to the parent listening event callback

Next, simulate a situation: the son asked his father to take the living expenses, originally a month’s living expenses is 1500, then found 1500 is not enough to spend. Do you have to call my father and tell him that I don’t have enough pocket money? There you are! So what’s going on here? First of all, is not enough to ask the father to take, then you can not directly take ah, the money is not your father, after asking him to give you right. Ask not to take directly on strict meaning is to steal money, of course your relationship is good often do that also can’t! And in what way? Is there cash, wechat transfer, alipay transfer and other means ah! The father must include the son of it, you have something to bind to me what event, in this situation, for example, the cost of living is not enough to spend the event, the father received your phone said enough to do the next step.

Then the code $emit() did this for us, using a means to change the data. The point is, now that we have this scenario, we can implement it in code.

<div id="father">
        <child :zfb="money" @call="callHandel"/>
 </div>

    <script>
    // The values passed by the parent component through props are read-only properties and cannot be modified directly
    // The vue child component cannot change the props value of the parent component, otherwise an error will be reported in console
    // Can't change the props ZFB value inside a child component
        new Vue({
            el:'#father'.data: {
                money: 1500
            },
            methods: {
                // Call method (+ cost operation)
                callHandel(m) {
                    // how much m is added to the original
                    console.log('My son called me and said I didn't have enough money.')
                    this.money += m
                }
            },
            components: {
                'child': {
                    props: ['zfb'].template: ` < div > father living lines through the pay treasure: {{ZFB}} < button @ click = "$emit (' call ', 800)" > to father called < / button > < / div > `}}})</script>
Copy the code

Here is:

As we can see from the screenshot, $emit() helped us reverse the props from 1500 to 2300

The emit(‘ call ‘,800)” emit(‘ call ‘,800)” Emit (‘call’,800)” emit(‘call’,800)” Emit (‘ call ‘,800)” emit(‘ call ‘,800)” $emit() = $emit() = $emit() = $emit() = $emit() = $emit() Change just that scene means that you do not have to call to tell father that the living expenses are not enough, father received to give you to add it!
@call
@call
And then you get your new living expenses, and the whole process is over.

$emit() can be changed, but props can’t be changed. Let’s compare! Just change a part of the code to see the effect!

Let’s change the code in the template

template: {{ZFB}} < button@click =" ZFB +=800">  to father called < / button > < / div > `
Copy the code

The following error message appears when I click the button

The ZFB of the props component is passed to the child component as props. You cannot change the ZFB of the props component inside the child component. Then we know that we can’t change prop to synchronize with its parent component. Instead, we can make the component submit an event to the parent component. We can use the watch variable and $emit() event if the variable changes.

Conclusion: This comparison shows that when we need to change values in both directions, we need to use backpass values (children need to change properties or states of their parents).