When a component of the Vue accepts external data, the Vue specifies that the child component, after receiving external data through the props, has only the right to use the data, but does not have the right to modify the property.

If a child component can modify the data from the outside at will, it may not know who modified the data after the data is modified, resulting in data confusionCopy the code

Therefore, Vue states that a component can only use properties of props, and if it wants to change, it must notify the real owner of the data, which is the parent file that uses the component

The role of the.sync modifier

Simplify the code writing method of data communication between parent and child components, and add new bidirectional binding to prop.

For example,

  • The parent component has $1000
  • The child component costs $10 each time it clicks a button
  • The balance displayed on the parent component changes accordingly to the balance displayed on the child component

When the.sync modifier is not used

To implement passing values between parent and child components, you usually use props and a custom event $emit. The parent component passes the value to the child component via props, and the child component passes the value to the parent component via $emit. The parent component gets the value via event listening.

/ / the parent component
<template>
    <div class="app">App.vue I now have {{total}}<hr>
        <!-- 这里的 update:money 是一个字符串 -->
        <! Update :money event -->
        <! -- Use $evet to receive arguments passed by child components -->
        <Child :money="total" v-on:update:money="total = $event"/>
    </div>
</template>

<script>
    import Child from "./Child.vue";
    export default {
        data() {
            return { total: 1000 };
        },
    components: { Child: Child }
    };
</script>

<style>
.app {
    border: 3px solid red;
    padding: 10px;
}
</style>
Copy the code
/ / child component
<template>
    <div class="child">
        {{money}}
        <! $emit emit update:money event on parent component -->
        <! The first argument is the event name, and the second argument is the result of the argument.
        <button @click="$emit('update:money', money-10)">
            <span>To spend money</span>
        </button>
    </div>
</template>

<script>
    export default {
// Accept the money property from the parent component
// The child component cannot be modified directly, so it needs to be modified via $emit
        props: ["money"]};</script>

<style>
    .child {
        border: 3px solid green;
    }
</style>
Copy the code

Click the button three times, and the result is shown as follows:

Use the.sync modifier

// The parent component is as follows, the child component remains unchanged
<template>
    <div class="app">App.vue I now have {{total}}<hr>
        <! -- Simplified code writing
        <Child :money.sync="total"/>
    </div>
</template>

<script>
    import Child from "./Child.vue";
    export default {
        data() {
            return { total: 1000 };
        },
        components: { Child: Child }
    };
</script>

<style>
    .app {
        border: 3px solid red;
        padding: 10px;
    }
</style>
Copy the code

conclusion

Do not use. Sync modifier:
Use. Sync modifier:

This article references excerpts:

  1. Go to Vue’s.sync modifier, LoveVin
  2. What is the use of the.sync modifier in Vue
  3. What is the use of the.sync modifier in Vue