Vue3自定义v-model怎么实现

在 Vue 3 中，可以使用 `v-model` 指令来创建自定义的双向绑定。自定义 `v-model` 实际上是一个带有 `value` 和 `update:value` 的 prop 和事件的组件。

下面是一个简单的例子，实现一个自定义的带有输入框和计数器的组件：

<template>
  <div>
    <input :value="value" @input="$emit('update:value', $event.target.value)" />
    <button @click="increment">+</button>
    <span>{{ count }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
      this.$emit('update:value', this.value + 1)
    }
  }
}
</script>

在使用自定义 `v-model` 的时候，只需要将组件的 `v-model` 绑定到一个变量即可：

<template>
  <div>
    <my-input v-model="myValue" />
    <p>Current value: {{ myValue }}</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue'

export default {
  components: {
    MyInput
  },
  data() {
    return {
      myValue: 0
    }
  }
}
</script>

这里的 `MyInput` 组件就是上面定义的带有输入框和计数器的组件。注意在绑定 `v-model` 的时候，实际上是将 `myValue` 绑定到了组件的 `value` prop 上，并且监听了 `update:value` 事件来更新 `myValue` 的值。