首先理解: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