当前位置：首页 > VUE

vue实现vmodel

2026-02-10 14:52:23VUE

Vue 实现 v-model

在 Vue 中，v-model 是一个语法糖，用于在表单元素或自定义组件上实现双向数据绑定。以下是实现 v-model 的几种方式：

在表单元素上使用 v-model

v-model 可以直接用于原生表单元素（如 input、textarea、select），它会根据元素类型自动绑定对应的属性和事件。

<template>
  <input v-model="message" placeholder="请输入内容">
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

v-model 在表单元素上默认绑定了 value 属性和 input 事件。

在自定义组件上使用 v-model

在自定义组件中，v-model 默认绑定 value 属性和 input 事件。可以通过 model 选项修改默认行为。

<template>
  <CustomInput v-model="message" />
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在 CustomInput.vue 中：

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 model 选项修改默认绑定

如果需要修改默认的 value 和 input 绑定，可以在组件中使用 model 选项：

<template>
  <CustomInput v-model="message" />
</template>

<script>
export default {
  model: {
    prop: 'checked',  // 修改绑定的属性名
    event: 'change'   // 修改绑定的事件名
  },
  props: ['checked'],
  methods: {
    handleChange(e) {
      this.$emit('change', e.target.checked)
    }
  }
}
</script>

Vue 3 中的 v-model

在 Vue 3 中，v-model 的行为有所变化。默认情况下，v-model 绑定的是 modelValue 属性和 update:modelValue 事件。

<template>
  <CustomInput v-model="message" />
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在 CustomInput.vue 中：

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

多个 v-model 绑定

Vue 3 支持在单个组件上绑定多个 v-model：

<template>
  <UserForm
    v-model:name="userName"
    v-model:age="userAge"
  />
</template>

<script>
import UserForm from './UserForm.vue'

export default {
  components: { UserForm },
  data() {
    return {
      userName: '',
      userAge: 0
    }
  }
}
</script>

在 UserForm.vue 中：

<template>
  <input
    :value="name"
    @input="$emit('update:name', $event.target.value)"
  >
  <input
    :value="age"
    @input="$emit('update:age', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['name', 'age']
}
</script>