【VUE】Vue2中 v-model 的原理
V-model 是用来监听用户事件然后更新数据的语法糖。
其本质还是单向数据流，内部是通过绑定元素的 value 值向下传递数据，然后通过绑定 input 事件，向上接收并处理更新数据。
单向数据流：父组件传递给子组件的值子组件不能修改，只能通过emit事件让父组件自个改。
// 比如
<input v-model="sth" />
// 等价于
<input :value="sth" @input="sth = $event.target.value" />
给组件添加 v-model 属性时，默认会把value 作为组件的属性，把 input作为给组件绑定事件时的事件名:
// 父组件
<my-button v-model="number"></my-button>
// 子组件
<script>
export default {
props: {
value: Number, // 属性名必须是 value
},
methods: {
add() {
this.$emit('input', this.value + 1) // 事件名必须是 input
},
}
}
</script>
如果想给绑定的 value 属性和 input 事件换个名称呢？
在 Vue 2.2 及以上版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event：
<script>
export default {
model: {
prop: 'num', // 自定义属性名
event: 'addNum' // 自定义事件名
}
}
</script>