Vue中v-model和.sync的差异及用法

761 阅读1分钟

二者相同点:都是语法糖,都可以实现父子组件中的数据的双向通信

不同点:

书写格式不同 v-model="sum", :num.sync="sum"

绑定个数不同 v-model一个组件或输入框只能绑定一个 .sync可以有多个

v-model 是@input + value的语法糖

.sync 是@update:sum 的语法糖

v-model 其在父子组件之间数据的传递方式如下

//父组件
<template>
    <!--v-model是语法糖-->
    <Input v-model="sum">

    <!--默认等效于下面这行-->
    <Input :value="sum" @input="(value)=>{sum=value}">
</template>

//子组件
<input :value="sum" @input="(e)=>{$emit('input',e.target.value)}"/>

.sync 其在父子组件之间数据的传递方式如下

//父组件
<template>
    <!-- sync修饰符添它能用于修改传递到子组件的属性,如果像下面这样写 -->
    <Input :foo.sync="sum">

    <!-- 等效于下面这行,那么和v-model的区别只有事件名称的变化 -->
    <Input :foo="sum" @update:foo="(value)=>{sum=value}">
</template>

//子组件
this.$emit('update:foo',value)