本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、v-model

1、父组件：

父组件通过v-model绑定值。 如需根据v-model传入的值改变，而触发其他更新需要通过watch监听。

2、子组件：

声明model对象 设置事件event和prop字段 通过porps接受父组件传送值 修改是通过this.$emit广播事件

3、示例代码:

父组件

<template>
  <children v-model="message"></children>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // 监听message变化    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

子组件

<template>  
  <h1>{{ message }}</h1> 
</template>
<script>
export default {  
  model:{    
    prop: "message", // 这个字段，是指父组件设置 v-model 时，将变量值传给子组件的 msg 
    event: "input" // 这个字段，是指父组件监听 parent-event 事件  
  },  
  props: {
     //此处必须定义和model的prop相同的props，因为v-model会传值给子组件 
    message: String    
},  
  mounted() {    //这里模拟异步将msg传到父组件v-model，实现双向控制    
    setTimeout(_ => {      
      this.$emit("input", "children");      
      //将这个值通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量   
     }, 1500);  
  }
}; 
</script>

4、本质

v-model本质上就是一个语法糖。相当于为父组件绑定了一个props与更新事件，当子组件数据更新时，实质上是调用了input事件来改变父组件的值：

<template>
    <Children :message="message" @input="(event) => { message = event }"/> 
</template>

//v-model的本质
<!--v-model写法-->
<my-component type="text" v-model="value">
<!--展开语法糖后的写法-->
<my-component type="text"
  :value="value"
  @input="value = $event.target.value"
>
<!--
默认针对原生组件input事件，但是如果子组件定义了针对事件
model: {
        prop: "value",
        event: "update"
},
则编译为
-->
<my-component type="text"
  :value="value"
  @update="(val) => value = val"
>

二、.sync

1、父组件：

//通过修改触发事件
input为update:myPropName
//实现相同效果
```js
## 2、子组件：
```js
//通过修改
this.$emit(update:myPropName)

3、示例代码

父组件
<template>
  <Children :messag.sync="message"/>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // 监听message变化    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

子组件

<template>  
  <h1>{{ message }}</h1> 
</template>
<script>
export default {  
  props: {
    message: String    
  },  
  mounted() {  
    setTimeout(_ => {      
      this.$emit("update:messag", "children");      
     }, 1500);  
  }
}; 
</script>

4、本质

.sync 是为了实现对 props 的双向绑定。比如，现在有一个包含 title prop的组件，可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)；

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性：

<template>
  <Children :title="title" @update:title="title = $event"/> 
</template>

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

三、总结功能作用场景：

1. 两者本质都是一样，并没有任何区别： “监听一个触发事件”="(val) => value = val"。

//细微之处的区别
//只不过v-model默认对应的是input或者textarea等组件的input事件，
//如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。
//比较单一，不能有多个。

// 子组件可以用自定义事件，来替换v-model默认对应的原生input事件，只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},

//一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”
//而并不像v-model那样，一个组件只能有一个。

2. v-model针对更多的是最终操作结果，是双向绑定的结果，是value，是一种change操作。 比如：输入框的值、多选框的value值列表、树结构最终绑定的id值列表（ant design和element都是）、等等...
3. .sync针对更多的是各种各样的状态，是状态的互相传递，是status，是一种update操作。 比如：组件loading状态、子菜单和树结构展开列表（状态的一种）、某个表单组件内部验证状态、等。
4. 但是也有例外，就是v-model也可以替代部分.sync的情况，这是针对于这个组件只有一个功能就是切换状态的时候，这个状态就是最终操作值，这时候可以替代.sync修饰符。使用两种不同的方式双向绑定，能够让我们快速理解组件的结构。