vue如何实现vmodel
Vue 中实现 v-model 的方法
v-model 是 Vue 中用于双向数据绑定的指令，常用于表单元素或自定义组件。以下是具体实现方式：
在表单元素中使用 v-model
v-model 可以直接用于原生表单元素，自动绑定数据并监听输入事件：
<input v-model="message" placeholder="输入内容">
<p>输入的内容是：{{ message }}</p>data() {
return {
message: ''
}
}在自定义组件中实现 v-model
自定义组件需要显式定义 v-model 的行为：
- 默认情况下，
v-model在组件上使用value作为 prop，input作为事件：
<custom-input v-model="message"></custom-input>Vue.component('custom-input', {
props: ['value'],
template: `
<input
:value="value"
@input="$emit('input', $event.target.value)"
>
`
})- Vue 2.2.0+ 允许自定义
model选项：
Vue.component('custom-input', {
model: {
prop: 'checked',
event: 'change'
},
props: ['checked'],
template: `
<input
type="checkbox"
:checked="checked"
@change="$emit('change', $event.target.checked)"
>
`
})Vue 3 中的变化
Vue 3 对 v-model 进行了以下改进：
- 默认使用
modelValue作为 prop，update:modelValue作为事件：
app.component('custom-input', {
props: ['modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})- 支持多个
v-model绑定：
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
></user-name>app.component('user-name', {
props: {
firstName: String,
lastName: String
},
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
})修饰符的使用
v-model 支持内置修饰符：
<input v-model.trim="msg"> <!-- 自动去除首尾空格 -->
<input v-model.number="age" type="number"> <!-- 自动转为数字 -->
<input v-model.lazy="msg"> <!-- 改为 change 事件后同步 -->自定义修饰符：
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `
<input type="text" :value="modelValue" @input="emitValue">
`
})<my-component v-model.capitalize="myText"></my-component>这些方法涵盖了 Vue 中 v-model 的主要使用场景和实现方式。
