序：v-model是v-bind和v-on:input的结合，即监听了表单的input事件，然后修改value属性对应的值
一、vue单文件中使用v-model
众所周知，当我们使用v-bind绑定prop时，数据流的流向是从model层流向view层，被v-bind绑定的prop会从data中读取属性值；
那么如何实现既能让数据从model层流向view层，又能从view层流向model层的双向数据绑定呢？这个时候就需要使用到指令v-model,指令v-model的本质是一个语法糖，他是:value & @ input 的简写形式；
具体代码如下：
<template>
<div class="container">
<h1>父组件{{num}}</h1>
<!-- 普通写法 -->
<input type="text" :value="num" @input="num = $event.target.value">
<!-- 使用v-model -->
<!-- <input type="text" v-model="num"> -->
<hr>
</div>
</template>
<script>
export default {
data(){
return {
num:100
}
}
}
</script>
二、父子组件传值时使用 v-model
注：v-model <=> v-bind:value & @input = 'value = $event'
父组件
<template>
<div class="container">
<h1>父组件{{num}}</h1>
<hr>
<myInput v-model.number='num'/>
</div>
</template>
<script>
import myInput from '../components/myInput.vue'
export default {
components:{myInput},
data(){
return {
num:100
}
}
}
</script>
子组件
<template>
<div class="container">
<h1>子组件</h1>
<input type="text" :value="value" @input="handleInput">
</div>
</template>
<script>
export default {
name:'myInput',
props:{
value:{
type:Number,
require:true
}
},
methods:{
handleInput(e){
this.$emit('input',e.target.value)
}
}
}
</script>
三、进阶
以上这种方式实现的父子组件的v-model通信，但是限制了子组件中props接收的属性名必须为value和emit触发的必须为input，这样容易有冲突，特别是在表单里面。所以，为了更优雅的使用v-model通信，可以在子组件中使用model选项;
子组件进阶代码
<template>
<div class="container">
<h1>子组件</h1>
<input type="text" :value="abc" @input="handleInput">
</div>
</template>
<script>
export default {
name:'myInput',
/**
* model - 用来避免冲突
* prop属性用来指定props属性中的哪个值用来接收父组件v-model传递的值(例如:这里用props中的abc来接收父组件传递的v-model值);
* event属性可以理解为父组件@input的别名，从而避免冲突，即emit时要提交的事件名。
*/
model:{
prop:'abc',
event:'ABC'
},
props:{
abc:{
type:Number,
require:true
}
},
methods:{
handleInput(e){
this.$emit('ABC',e.target.value)
}
}
}
</script>
