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

首先理解：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-modal="number"></child>
</template>
<script>
export default {
	data(){
		return{
			number:4
		}
	}
}
</script>

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

第二种写法：

//父组件
<template>
	<p>{{ number}}</p>
	<child v-modal="number"></child>
</template>
<script>
export default {
	name:"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