当前位置：首页 > VUE

vue 实现v model

2026-01-19 14:47:23VUE

Vue 实现 v-model 的方法

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

在表单元素上使用 v-model

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

<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>

对于复选框和单选按钮，v-model 会自动处理值的绑定：

<input type="checkbox" v-model="checked">
<p>Checked: {{ checked }}</p>

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

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

<custom-input v-model="message"></custom-input>

自定义组件的实现：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

使用 .sync 修饰符

Vue 2.3.0+ 支持 .sync 修饰符，可以实现父子组件的双向绑定。

<custom-input :value.sync="message"></custom-input>

组件内部通过 $emit('update:value', newValue) 更新值：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('update:value', $event.target.value)"
    >
  `
})

Vue 3 中的 v-model

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定，并默认使用 modelValue 和 update:modelValue。

<custom-input v-model="message"></custom-input>

组件实现：

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

自定义 v-model 修饰符

可以自定义 v-model 的修饰符，例如 trim、number 等。

<input v-model.trim="message">

在自定义组件中，可以通过 model 选项的 prop 和 event 字段自定义绑定行为：

vue 实现v model

Vue.component('custom-input', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('change', $event.target.value)"
    >
  `
})

通过以上方法，可以灵活地在 Vue 中实现 v-model 的双向绑定功能。