v-model 与 .sync 的异同

用法：

v-model （2.2.0+）

<!--v-model写法-->
<my-component v-model="value">
<!--展开语法糖后的写法-->
<my-component
  :value="value"
  @input="value = $event.target.value"
>

使用：

// 父组件
<child v-model="love"/>

// 子组件
{
    props:{
        value:{
            type:String,
            default:'my love'
        }
    },
    ...
    methods:{
        onClick(){
            this.$emit('input','love you!')
        }
    }
}

v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是可通过 model 来修改，同时需要手动的抛出修改后 event 的名字：

Vue.component('my-component', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean // 还是需要声明
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)" // 手动抛出事件
    >
  `
})

组件使用方法不变：

<my-component v-model="checkedStatus">

.sync (2.3.0+)

<!--语法糖.sync-->
<my-component :value.sync="msg" />
<!--编译后的写法-->
<my-component 
  :value="msg" 
  @update:value="(val) => msg = val"
>

使用：

// 父组件
<dialog :visible.sync="isVisible"/>

// 子组件
{
    props:{
        visible:{
            type:Boolean,
            default:false
        }
    },
    ...
    methods:{
        onClose(){
            this.$emit('update:visible',false)
        }
    }
}

同

1. 两者的本质都是语法糖。
2. 目的都是实现组件与外部数据的双向绑定。

异

1. v-model 只能作用于单个属性，.sync 可作用多个属性。
2. v-model 主要作用与表单注重值的改变，.sync 主要作用与状态的改变（显隐）。