【Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

ChatGPT4.0国内站点，支持GPT4 Vision 视觉模型：海鲸AI

在Vue中，v-model 是一个语法糖，用于在输入框、选择框等表单元素上创建双向数据绑定。当你在自定义组件中实现 v-model 功能时，你需要理解它背后的原理：v-model 实际上是一个属性和一个事件的简写。

在 Vue 2.x 中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件来更新变量。如果你想在自定义组件中实现 v-model，你可以按照以下步骤操作：

1. 定义一个 prop，通常命名为 value。
2. 当组件内部的值发生变化时，发出一个自定义的 input 事件，并将新值作为事件的参数。
3. 在父组件中，使用 v-model 指令绑定一个变量到自定义组件上。

下面是一个简单的自定义输入框组件示例，演示如何实现 v-model：

<template>
  <div>
    <input
      :value="value"  <!-- 绑定到 prop -->
      @input="onInput" <!-- 监听 input 事件 -->
    />
  </div>
</template>

<script>
export default {
  props: ['value'], // 接收一个名为 value 的 prop
  methods: {
    onInput(event) {
      // 当 input 的值发生变化时，发出一个 input 事件并附带新值
      this.$emit('input', event.target.value);
    }
  }
}
</script>

在父组件中，你可以这样使用这个自定义组件，并通过 v-model 进行数据绑定：

<template>
  <div>
    <custom-input v-model="myValue" />
  </div>
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      myValue: '' // 这个值将与 CustomInput 组件的值保持同步
    };
  }
}
</script>

在 Vue 3.x 中，v-model 的实现略有不同。Vue 3 支持多个 v-model 绑定，并且你可以自定义绑定的 prop 和事件名称。以下是如何在 Vue 3 中实现 v-model：

1. 定义一个名为 modelValue 的 prop。
2. 发出一个名为 update:modelValue 的事件来通知父组件更新其数据。

自定义组件的实现会是这样：

<template>
  <div>
    <input
      :value="modelValue"  <!-- 绑定到 prop -->
      @input="updateValue" <!-- 监听 input 事件 -->
    />
  </div>
</template>

<script>
export default {
  props: ['modelValue'], // 接收一个名为 modelValue 的 prop
  methods: {
    updateValue(event) {
      // 当 input 的值发生变化时，发出一个 update:modelValue 事件并附带新值
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

在父组件中使用时，你可以同样使用 v-model：

<template>
  <div>
    <custom-input v-model="myValue" />
  </div>
</template>

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

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

通过这种方式，你可以在自定义组件中实现与原生表单元素相似的 v-model 功能。