vue.js - Vue 2.7 使用 setup 语法糖如何实现自定义 v-model？

Question

vue2.7 使用setup语法糖 但是想实现自定义v-model 却发现语法糖不支持model: { prop: '', event: ''}

尝试了modelValue 发现不支持

我现在只能使用defineComponent，用optionsApi实现

Answer 1

在 Vue 2.x 中，setup 语法糖是 Vue 3 的 Composition API 的一部分，并且 Vue 2.7 引入了对 Composition API 的有限支持，主要是为了帮助开发者更容易地迁移到 Vue 3。然而，Vue 2.7 的 Composition API 支持并不包括 Vue 3 的所有特性，比如 model 选项的语法糖。

要在 Vue 2.7 中使用 setup 语法糖实现自定义 v-model，你需要手动处理 value 属性和 input 事件。由于 model 选项的语法糖不可用，你需要显式地创建 props 和 emits，并在 setup 函数中管理它们。

以下是一个使用 defineComponent 和 setup 语法糖实现自定义 v-model 的例子：

<template>  <input    :value="modelValue"    @input="updateValue($event.target.value)"  /></template><script>import { defineComponent } from 'vue'export default defineComponent({  name: 'CustomInput',  props: {    modelValue: {      type: [String, Number],      default: ''    }  },  emits: ['update:modelValue'],  setup(props, { emit }) {    const updateValue = (value) => {      emit('update:modelValue', value)    }    return {      modelValue: props.modelValue,      updateValue    }  }})</script>

在上面的例子中，modelValue 作为 prop 被传入组件，并且我们定义了一个 update:modelValue 事件来触发值的更新。在 setup 函数中，我们定义了一个 updateValue 函数来处理 input 事件的触发，并通过 emit 方法来发出 update:modelValue 事件，携带新的值。

注意，这种方法不需要 Vue 3 的 model 选项的语法糖，而是直接使用了 Vue 2 的 props 和 emits 选项，并在 setup 函数中进行了逻辑处理。这种方式是兼容 Vue 2.7 的 Composition API 使用方式，并能够让你享受到一些 Composition API 的优点，同时保持与 Vue 2 的兼容性。