在Vue中，v-model是一个双向绑定的语法糖，它会根据表单元素的类型自动选择正确的方法来更新数据。
对于输入框，v-model会利用value属性和input事件来创建双向数据绑定。
<template>
<input v-model="message" />
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>在上面的例子中，v-model实现了与message数据属性的双向绑定。当message变化时，输入框的显示会更新；当用户在输入框中输入数据时，message的值也会随之更新。
对于复选框和单选按钮，v-model会分别使用checked属性和change事件来实现绑定。
<template>
<input type="checkbox" id="checkbox" v-model="isChecked" />
<label for="checkbox">{{ isChecked }}</label>
</template>
<script>
export default {
data() {
return {
isChecked: false
}
}
}
</script>在这个例子中，复选框的选中状态会与isChecked数据属性保持同步。
自定义组件中使用v-model时，需要在子组件内部使用$emit来触发事件，并在父组件中监听相应的事件来更新数据。
// 子组件
<template>
<input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>
<script>
export default {
props: ['value'],
model: {
prop: 'value',
event: 'update:value'
}
}
</script>
// 父组件
<template>
<custom-input v-model="message" />
</template>
<script>
import CustomInput from './CustomInput.vue'
export default {
components: {
CustomInput
},
data() {
return {
message: ''
}
}
}
</script>在这个例子中，子组件使用了$emit来发出一个update:value事件，并将输入框的当前值作为参数传递。父组件通过监听update:value事件来更新自己的message数据属性。