简介

实习的第一天，第一次看企业的项目，有看到在组件间通信中使用了：v-model和.sync，自主学习的时候很少碰到这两个，这里展开一下它们的用法和区别

v-model

1. 在表单控件上创建双向数据绑定

1.1 作用：
vue中使用v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
1.2 本质：
<input v-modle="value" =><input :value @input="value=$event.target.value/>

1.3 用法：
<input v-model="message" placeholder="edit me">
<p>Message is:{{message}}</p>

2. 在组件上创建双向数据绑定和传递

2.1在双向数据绑定中：
子组件通过props 接收父组件绑定的数据， 此时双向数据传递的核心： 子组件中更改父组件初始化的是数值：this.$emit('input',实参值），
父组件传递的数值发生了改变，因此子组件接收的数据也发生了改变（这块不理解的请复习子父组件数据传递）。

.sync

1.1 作用
.sync修饰符是一个自动更新父组件属性的v-on监听器，当子组件改变了posp的值时，会将这个变化同步到组件中。
1.2 本质：
<custom-component :value.sync="value"></custom-component>=>
<custom-component :value="value" @update:value="value=$event"></custom-component>
1.3 用法：
子组件通过props 接收父组件绑定的数据, 子组件需要更新value指时：this.$emit('update:value',newValue)， 原理和v-model双向数据传递相同

两者异同

1.共同点

1.1 v-model和.sync都是父组件向子组件传值的语法糖
1.2 子组件都是通过props进行接收，数据传递原理基本相同

2.不同之处

2.1 v-model（$emit)只能使用一次，而.sync可以使用多次
2.2 子组件知识单一地修改某个父组件的值：表单类组件使用v-model，非表单类则使用sync
2.3 v-model主要用于获取最终的结果，而.sync主要用户状态的互相传递