开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
Vue的特别之处不仅仅是其响应式数据处理，还有它本身就是一个MVVM架构，采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上,这其中的数据双向绑定就显得尤为关键。
v-model
概念：vue2官方给出的定义是Vue框架内置的API指令，本质是一种语法糖写法，可以监听用户输入事件以更新数据。
原理：
- v-bind绑定value属性值
- v-on绑定input事件，监听到函数中，函数会获取最近的数据并赋值到绑定的属性中；
<input> v-model="loginname"/>
//等价于
<input :value="loginname" @input="loginname = @event.target.value"/>
v-model如何在自定义组件中使用：
1、定义一个父组件，将自身属性传递给子组件
2、一个组件上的v-model默认会利用名为value的prop和名为input的事件，而model选项可以实现自定义
例子：
父组件
子组件
父组件传入的parentShow,会自动传入子组件中，名为parentValue的prop,当子组件触发change事件并设置一个新值时，父组件的parentShow会被更新。
需要注意的是，子组件仍然需要在props中声明parentValue，否则子组件无法访问传入的值
虽然可以实现数据的双向绑定，但是v-model只能绑定一个属性，如果同时绑定多个属性该如何处理呢？vue2中提供了一个修饰符.sync
.sync是vue2.3.0+版本新增修饰符，以update:myPorpName的模式触发事件取代v-model
.sync用法
父组件
子组件
与v-model相同点和不同点：
- 都是语法糖，都可以实现组件通信
- 格式不同 v-model="value" :p1.sync="value"
- v-model 更新 是利用监听@input事件对绑定属性value更新，.sync是通过@update:p1函数进行更新
- v-model只能绑定一个，.sync可以用多次，绑定多个属性
vue3中对v-model进行了拓展，可以自定义v-model绑定的名称，例如v-model:p1="foo" v-model:p2="bar" 子组件可以通过props，emits进行接收和更新（update:p1）,从而实现和vue2中.sync同样的效果
