Vue 的 v-model 和 model-value 分别是什么

Vue 的 v-model 是一个指令，用于将表单元素的值与组件实例的数据进行绑定，会自动根据元素类型不同生成不同的绑定逻辑。

比如，对于 input 输入框，v-model 会将输入框的值绑定到组件实例的一个数据属性上，并且在输入框的值发生变化时，自动更新组件实例的数据属性。

而 model-value 是一个 prop，用于自定义组件中与 v-model 绑定的值的名称。默认情况下，v-model 绑定的值名称为 value，但有时候我们需要将 v-model 绑定的值与组件的某个 prop 进行绑定，这时就需要通过传入 model-value prop 来指定绑定的 prop 名称。

例如，我们可以通过以下方式定义一个自定义组件：

<template>
  <input :value="computedValue" @input="onInput">
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    computedValue: {
      get() {
        return this.modelValue
      },
      set(newValue) {
        this.$emit('update:modelValue', newValue)
      }
    }
  },
  methods: {
    onInput(event) {
      this.computedValue = event.target.value
    }
  }
}
</script>

然后，在使用此组件时，我们则可以通过以下方式绑定 v-model：

<custom-input v-model="myValue" :model-value="customProp"></custom-input>

其中，myValue 是组件外部的一个数据属性，用于存储输入框的值。而 customProp 则是组件内部接收的一个 prop，用于指定与 v-model 绑定的值对应的组件数据属性名称，这里是 computedValue。由于传入了 v-model，因此在组件内部也需要定义与 computedValue 对应的 update:modelValue 事件来更新组件外部的 myValue 数据属性。