vue中 v-model 和model-value

在 Vue 中，`v-model` 是一个指令，用于实现表单元素和数据的双向绑定。它可以简化表单元素的处理，使得数据的变化能够自动反映到表单元素上，同时用户在表单元素中的输入也能够自动更新对应的数据。

`v-model` 指令实际上是 `:value` 和 `@input` 事件的语法糖。它通常用在输入框、选择框等表单元素上。例如：

<input type="text" v-model="message" />

在上面的例子中，`message` 是一个 Vue 实例的数据属性，通过 `v-model` 指令与输入框进行绑定。当输入框中的值发生改变时，`message` 的值也会跟着更新；反之，当 `message` 的值改变时，输入框中的值也会自动更新。

另外，在 Vue 3 中，如果你想要在自定义组件上使用 `v-model`，需要通过 `modelValue` 属性来接收值，并通过 `update:modelValue` 事件来更新值。例如：

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

在自定义组件中，需要使用 `modelValue` 属性接收传入的值，并在需要更新值的时候触发 `update:modelValue` 事件。例如：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

这样，通过 `v-model` 指令就能够实现自定义组件和数据的双向绑定。