vue实现vmodel

Vue 实现 v-model

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

在表单元素上使用 v-model

在原生表单元素（如 input、textarea、select）上，v-model 会自动绑定 value 属性和 input 事件：

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

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

在自定义组件上实现 v-model

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

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['value'],
      template: `
        <input
          :value="value"
          @input="$emit('input', $event.target.value)"
        />
      `
    }
  }
}
</script>

使用 Vue 3 的 v-model 语法

在 Vue 3 中，v-model 的默认行为有所变化，绑定的是 modelValue prop 和 update:modelValue 事件：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    'custom-input': {
      props: ['modelValue'],
      template: `
        <input
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)"
        />
      `
    }
  }
}
</script>

实现多个 v-model 绑定

在 Vue 3 中，可以为同一个组件绑定多个 v-model：

<template>
  <custom-input
    v-model:first="firstName"
    v-model:last="lastName"
  />
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  },
  components: {
    'custom-input': {
      props: ['first', 'last'],
      template: `
        <div>
          <input
            :value="first"
            @input="$emit('update:first', $event.target.value)"
          />
          <input
            :value="last"
            @input="$emit('update:last', $event.target.value)"
          />
        </div>
      `
    }
  }
}
</script>

使用计算属性优化 v-model

可以通过计算属性实现更复杂的逻辑：

<template>
  <input v-model="computedMessage" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: {
      get() {
        return this.message
      },
      set(value) {
        this.message = value.toUpperCase()
      }
    }
  }
}
</script>

以上方法涵盖了从基础到高级的 v-model 实现方式，适用于 Vue 2 和 Vue 3 的不同场景。