Detailed explanation of the principles and differences between vue modifiers v-model and .sync

Principle of v-model

• The essence of v-model is actually:valueand@inputSyntax sugar for events

    <!--v-modelHow to write-->
    <my-component type="text" v-model="num">
    <!--展开语法糖后的How to write-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

The parent component passes values ​​and custom events to the child component, and the child component uses $emit to trigger the input event.

• Note: In the child component, this input event is a custom event

// In subcomponent<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

The principle of .sync

// In parent component    <my-component :="num" />

// In the subcomponent    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

The two are essentially the same, and there is no difference: "listen to a trigger event"="(val) => value = val".

Difference between v-model and .sync modifier

The difference between .sync and v-model is

Similarities: they are all syntactic sugar, and they can realize two-way communication of data in parent-child components.

Difference points:

• Different formats. v-model="num", :="num"
• v-model： @input + value
• :: @update:num
• v-model can only be used once; .sync can have multiple.

However, v-model corresponds to the input event of components such as input or textarea by default. If the input event is replaced in the child component, its essence is exactly the same as the .sync modifier. It is relatively single, there cannot be multiple.

// Subcomponents can use custom events to replace the native input event corresponding to v-model by default, but we need to manually $emit in the subcomponentmodel: {
        prop: "value",
        event: "update"
},

A component can use .sync modifiers to multiple properties, and can "bind multiple "prop" at the same time, and not like v-model, a component can only have one.

Because using v-model, only one input event can be triggered in the child component, the event name is unique, and the .sync modifier, the time name it triggers is updata: attribute name, so it has multiple event names, and can be used multiple times

Summarize the action scenario:

• props/$emit is the most commonly used communication method for parent-child components, while v-model and .sync are just their syntax sugar
• If a child component only modifies the value of a parent component, the form class component usesv-modelSyntactic sugar
• If a child component only modifies the value of a parent component, non-form component usessyncSyntactic sugar
• Complex logic or honestprops/$emit

In fact, syntax sugar is just more convenient when using parent components, while child components should behave as well.

The above is the detailed explanation of the principles and differences of vue modifier v-model and .sync. For more information about vue modifier v-model .sync, please pay attention to my other related articles!