vue 如何实现vmodel

Vue 中实现 v-model 的方法

v-model 是 Vue 中用于实现双向数据绑定的指令，通常用于表单元素。以下是实现 v-model 的几种方式：

在表单元素上使用 v-model

对于原生表单元素（如 input、textarea、select），可以直接使用 v-model 绑定数据：

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

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

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

在自定义组件中，可以通过 model 选项或 Vue 2.6+ 的 v-model 语法糖实现双向绑定。

方法 1：使用 model 选项（Vue 2.x）

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

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

方法 2：使用 Vue 2.6+ 的 v-model 语法糖

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

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

在 Vue 3 中使用 v-model

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定。

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

<script>
import { defineComponent } from 'vue'

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

实现多个 v-model 绑定（Vue 3）

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

<template>
  <user-form 
    v-model:name="name" 
    v-model:email="email"
  ></user-form>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      name: '',
      email: ''
    }
  },
  components: {
    'user-form': {
      props: ['name', 'email'],
      emits: ['update:name', 'update:email'],
      template: `
        <div>
          <input 
            :value="name"
            @input="$emit('update:name', $event.target.value)"
          >
          <input 
            :value="email"
            @input="$emit('update:email', $event.target.value)"
          >
        </div>
      `
    }
  }
})
</script>

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