vue组件实现vmodel
实现 v-model 的双向绑定
在 Vue 中，v-model 是一个语法糖，用于在组件上实现双向数据绑定。默认情况下，v-model 在组件上会利用 value prop 和 input 事件，但可以通过 model 选项进行自定义。
基本实现方式：
<template>
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
</template>
<script>
export default {
props: ['value']
}
</script>自定义 model 选项：
如果需要修改默认的 prop 和事件名称，可以使用 model 选项：
<template>
<input
:checked="checked"
@change="$emit('change', $event.target.checked)"
>
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked']
}
</script>使用计算属性优化
对于需要处理输入值的情况，可以使用计算属性来简化代码：
<template>
<input v-model="internalValue">
</template>
<script>
export default {
props: ['value'],
computed: {
internalValue: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>处理多个 v-model
Vue 2.x 默认只支持单个 v-model，但可以通过自定义 prop 和事件实现多个双向绑定：
<template>
<input
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
>
<input
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
>
</template>
<script>
export default {
props: ['firstName', 'lastName']
}
</script>使用时：
<my-component
:firstName.sync="user.firstName"
:lastName.sync="user.lastName"
/>Vue 3 中的变化
Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定并移除了 .sync 修饰符：
<template>
<input
:modelValue="modelValue"
@update:modelValue="$emit('update:modelValue', $event)"
>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
}
</script>多个 v-model 绑定示例：
<my-component v-model:first-name="firstName" v-model:last-name="lastName" />组件内部：
<template>
<input
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
>
<input
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
>
</template>
<script>
export default {
props: ['firstName', 'lastName'],
emits: ['update:firstName', 'update:lastName']
}
</script>
