What is the difference between modifier v-model and .sync? A brief analysis of differences and comparisons

What is the difference between modifier v-model and .sync? The following article will talk about the differences between v-model and .sync modifier. I hope it will be helpful to you!

In the daily development process, the v-model command is often used. Generally speaking, v-model Directives create two-way data binding on forms and elements, but v-model is essentially syntactic sugar. When it comes to syntax sugar, we have to mention another two-way binding syntax sugar that has similar functions to v-model, that is.sync modifier. Here is a summary of the two:

1. v-model

1. Function

I believe that friends who have used the vue framework will not be unfamiliar with this command. v-model is used to perform <input>, <textarea> </textarea>, <select></select> Two-way binding of data on elements. (Learning video sharing: vue video tutorial)

For example:

<template>
    <div >
        <input v-model="value" type="text"/>    //这里的v-model里面的value可以直接获取到用户的输入值
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            value:"",    //这里定义的value变量可以直接将上面获取到的值进行操作
        };
      }, 
    }
</script>
<style  scoped>

</style>

When we enter a certain value in the input box, the value in the data below is You can directly get the value we entered without having to operate the dom element to obtain it.

1. Essence

v-model is essentially a syntactic sugar. Our habitual writing method is like this:

 <input v-model="value" type="text"/>

But actually the complete writing method is like this:

<input :value="value" @input="value=$event.target.value" type="text" />

By comparing the syntactic sugar and the original writing method, we can get: When adding the v-model attribute to the <input/> element, the value will be used as the attribute of the element by default, and the input event will be used as the trigger event for real-time delivery of value.

Note: Not all elements that can perform two-way data binding are input events!

3. Special usage

Generally, we use v-model mainly for two-way binding of data. It is very convenient to obtain the value entered by the user, but in some special cases, we can also use v-model for two-way binding of data between parent and child components.

<template>
    <div class="father">
        <Son v-model="str"/>
    </div>
</template>

<script>

import Son from &#39;@/components/Son.vue&#39;;    //引入子组件

export default {
    components: {Son},
    data() {
        return {
            str:"father"
        };
      },
    }
</script>

A father component and son component are defined here, and the son component is introduced into the father component, and v-model is bound to the son component to pass the value. At this time we need to receive and use this value in the son component:

<template>
    <div class="son">
        我是在son组件里接收到的值:{{value}}
    </div>
</template>
<script>
export default {
    components: {},
    props:{
        value:{
            type:String,
        },
      },
    }
</script>

Note: The value accepted here must be value. If you write it with another name, an error will be reported!

The parent component passes the value to the child component. The data cannot be modified directly in the child component. If you modify it directly, an error will be reported.

When When we need to modify this value, we need to pass it to the parent component for modification.

This requires defining a custom event on the child component in the parent component, through the child component $emit('custom event name','value') Method passes the value into the parent component.

But we cannot use custom events here because we use v-model to pass values, so we can only use input events to make modifications.

Use the $emit() method in the child component. Call the event in the parent component and pass the value

<template>
    <div class="son">
        我是在son组件里接收到的值:{{value}}
        <button @click="handleClick">click</button>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            str:&#39;son&#39;
        };
    },
    props:{
        value:{
            type:String,
        },
    },
    methods: {
        handleClick(){
            this.$emit(&#39;input&#39;,this.str)
        }
    },
    }
</script>

This completes the bidirectional data between the parent and child components. Binding effect

2. .sync modifier

1. Function

.sync The modifier can realize two-way binding between parent and child components, and can realize the child component to modify the value of the parent component synchronously. Compared with v-model, the sync modifier is Much simpler:

2. The essence

    //正常父传子
    <Son :a="num" />
    
    //加上sync之后的父传子
    <Son :a.sync="num" />
    
    //它等价于
    <Son :a="num" @update:a="val=>a=val" />
    
    //相当于多了一个事件监听，事件名是update:a,
    //回调函数中，会把接收到的值赋值给属性绑定的数据项中。

The value passing and receiving here are not the same as the normal parent component passing value to the child component. The only difference is that when the subcomponent returns a value, the event name called by $emit must be update:property name. If the event name is written incorrectly, no error will be reported, but there will be no error at that time. Change, this needs to be noted.

Summary

v-model and .sync: The same thing: they are both syntax sugar, and they can realize data communication in parent-child components.

Differences: Different formats, v-model="num" :num.sync="num"

v-model:@input value :num.sync:@update:num

Also, v-model can only be used once, and .sync can be used multiple times.

[Related video tutorial recommendations: vuejs entry tutorial, web front-end entry]

The above is the detailed content of What is the difference between modifier v-model and .sync? A brief analysis of differences and comparisons. For more information, please follow other related articles on the PHP Chinese website!