共计 1251 个字符，预计需要花费 4 分钟才能阅读完成。
v-model 介绍
熟悉 Vue 的小伙伴们都知道 v-model 是 Vue 的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。以下摘取自 Vue 官方文档
v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
text 和 textarea 使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
如何巧妙利用 v-model 实现父子组件传值
通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。
但是熟悉上面 v-model 的实现原理后，我们可以巧妙地运用这一原理（v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件）。
方法总结：
1. 子组件设 value 为 props 属性，并且不主动改变 value 值
2. 子组件通过 this.$emit(‘input’, ‘updateValue’) 将 updateValue 值传给父组件
3. 父组件通过 v-model=”localValue” 绑定一个本地变量，即可实现子组件 value 值与父组件 updateValue 值同步更新
举例
子组件
子组件，包含一个 button，并且将 value 属性设为 props（因为 v -model 使用的是 value 属性）。
点击 button 时，sum 值加 1，同时通过 this.$emit(‘input’, ++sum) 将更新后的值传给父组件（前提：传给父组件的值一定是你想赋给 value 的）
<template>
<div>
<button @click=”increase” style=”border: 1px solid black”>increase</button>
</div>
</template>
<script>
let sum = 0
export default {
name: ‘vmodel’,
props: {
value: {
type: Number,
default: 0
}
},
methods: {
increase () {
this.$emit(‘input’, ++sum)
console.log(‘value1’, this.value)
setTimeout(() => {
console.log(‘value2’, this.value)
}, 50)
}
}
}
</script>
父组件
父组件中，通过 v-model 绑定一个本地变量，即可实现子父组件同步更新
<div>
<increase v-model=”rangeValue”></increase>
<p>value:{{rangeValue}}</p>
</div>
<script>
data () {
return {
rangeValue: 0
}
}
</script>
实际上，这个过程是首先子组件通过 $emit(‘input’) 更新父组件的本地变量，然后子组件中的 value 属性通过 props 得以更新
总结
这种方式尤其适合子父组件传参的情况（子父组件同步更新）
