v-model和 .sync

标签：变化   check   syn   class   默认   value   false   绑定   eth   

1、v-model的双向数据绑定其实是一个语法糖，类似于，给子组件传入一个value值，并且监听子组件的input事件，在这个事件里将子组件传过来的新值赋值给父组件的value

<Input v-model="username">
//同于下：
<Input :value="username"  @input="username=$event">
//在子组件里面需要接收value属性，并绑定input事件
//子组件

//props选项：

注：v-model的语法糖的默认传递的属性是value，默认监听的事件是input事件

当然，默认属性和默认事件可以在子组件中自定义，如下：

//Input.vue子组件中有一个model选项可以用来自定义v-model的默认属性和事件（vue2.4以上的版本中新加的）
{
    model:{
        prop:‘checked‘,  //传递的属性
        event:‘change‘   //监听的事件
    }
    
}    

这样在子组件中，就可以结束checked属性值，和绑定change事件了

2、.sync修饰符和v-model实现的效果是相像的，只是.sync的绑定事件是不变的，也不能自定义的，必须是update:属性名；但是传入的属性是可以随意定义的，只要和事件update后面的参数保持一致就行了

<Input :aaa.sync="username">
//如同下
<Input :aaa.sync="username" @update:aaa="username = $event">
//这样也能实现数据的双向绑定

此时子组件中，子组件绑定的事件的$emit的事件也必须是update:aaa

this.$emit("update:aaa,false);

这样在父组件中才能监听到子组件的变化

总结一下：v-model是比较灵活的，它有默认的属性和事件，也可以自定义指定，比较方便；相比下，sync的事件就是固定不变的了，无法自定义

v-model和 .sync

标签：变化   check   syn   class   默认   value   false   绑定   eth   

原文地址：https://www.cnblogs.com/gopark/p/11735501.html