父子组件实现v-model的两种写法

首先理解：v-model = v-bind:value + v-on:input
v-model=“number” === （:value=“number” @input=“value=number=value>”）
所以只要子组件传值给父组件即可，即：this.$emit(eventName,value)
其中eventName为input。

1、第一种写法：

//父组件
<template>
	<p>{{ number}}</p>
	<child v-model="number"></child>
</template>
<script>
import child from './child.vue'
export default {
	components:{child},
	data(){
		return{
			number:4
		}
	}
}
</script>

//子组件child.vue
<template>
	<button @click="add">add</button>
</template>
<script>
	export default {
		name:"child",
		props:{
			value:{
				type: Number,
				default:0
			}
		},
		methods:{
			add() {
				this.$emit('input', this.value + 1)
			}
		}
	}
</script>

第二种写法：

//父组件
<template>
  <div>
    <p>{{ number}}</p>
    <child v-model="number"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  name:"parent",
  components:{child},
	data(){
		return{
			number:4,
		}
	}
}
</script>

//子组件child.vue
<template>
	<button @click="add">add</button>
</template>
<script>
export default {
	  name:"child",
	  model: {
	    prop: 'value',
	    event: 'change'
	  },
		props:{
			value:{
				type: Number,
				default:0
			}
		},
		methods:{
			add() {
				this.$emit('change', this.value + 1)
			}
		}
	}
</script>

总结：第二种写法适用于自定义事件。
如：单选框复选框这种@change而非@input