v-model

v-model

//v-model只是语法糖,第一行是第二行的语法糖
<input v-model="sth" />
<input :value="sth" @input="sth=$event.target.value" />
    
首先你要知道input元素本身有个oninput事件，html5增加的，类似于onchange，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给sth

结论：在给input元素添加v-model属性时，默认会把value作为元素的属性，然后把input事件作为实时传递value的触发事件

v-model在组件上的应用

//父组件
<my-button :value="number" @input="getValue" />
data(){
	return {
		number:1
	}
}
methods:{
    getValue(num){
        this.number=num
    }
}

//子组件
<button @click="add" />
props:{
    value:Number, //属性名必须是value
}
methods:{
    add(){
        this.$emit('input',this.value++ ) //事件名必须是input
    }
}

这样就可以简写为：
//父组件
<my-button v-model="number" />
data(){
	return {
		number:1
	}
}
    
//子组件
<button @click="add" />
props:{
    value:Number, //属性名必须是value
}
methods:{
    add(){
        this.$emit('input',this.value++ ) //事件名必须是input
    }
}