vue3 v-model组件使用

### 使用 `v-model` 实现 Vue3 组件中的双向数据绑定

#### 基本概念
在 Vue3 中，`v-model` 是一种用于创建基于表单输入、多选框以及下拉列表等元素上的双向数据绑定的简洁方式。它本质上是一个语法糖，简化了 `$emit('update:modelValue', newValue)` 和接收父级传递的数据作为 prop 的过程[^1]。

#### 单个属性的双向绑定
对于简单的场景，默认情况下 `v-model` 将会监听名为 `modelValue` 的 props 并且发出带有新值的事件 `update:modelValue` 来更新父组件的状态：

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

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['modelValue']);
</script>

<!-- 父组件 -->
<MyInput v-model="parentData"/>

这里展示了如何在一个自定义 `<MyInput>` 组件里应用 `v-model` 进行基本的双向绑定操作[^4]。

#### 多个属性的双向绑定
当涉及到更复杂的交互需求时，比如想要在同一组件内处理多个可编辑字段，则可以通过指定不同的参数名来扩展默认行为:

<!-- 子组件 -->
<template>
  <div>
    <input :value="firstName" @input="$emit('update:firstName', $event.target.value)">
    <input :value="lastName" @input="$emit('update:lastName', $event.target.value)">
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
  
const props = defineProps({
  firstName: String,
  lastName: String
});
</script>

<!-- 父组件 -->
<MyInputs 
  v-model:firstName="first"
  v-model:lastName="last"
/>

此例子说明了怎样利用命名空间特性让同一个子组件支持两个独立变量之间的同步变化[^5]。

#### 新增功能：使用宏函数 `defineModel()`
从 Vue 3.4 版本起引入了一个新的编译器宏——`defineModel()` ，这使得开发者能够更加方便地封装具有内置模型逻辑的基础 HTML 表单控件。该方法允许直接返回一个对象形式的结果给模板层面上使用的 `v-model` 属性[^3]:

// 子组件脚本部分
<script setup>
import { ref, defineModel } from 'vue'

let model = defineModel()
let internalState = ref(model)

function handleInput(event){
  const newVal = event.target.value;
  internalState.value = newVal; // 更新内部状态
  model = newVal;              // 同步外部模型
}
</script>

以上代码片段解释了通过 `defineModel()` 方法可以在不显式声明 emit 或者 props 的前提下完成相同的功能，并保持良好的解耦合度。