Vue 3 中 v-model 基于 modelValue prop 和 update:modelValue 事件实现双向绑定；需声明 prop、emit 更新事件，支持自定义名、修饰符及 defineModel 简化写法。
在 Vue 3 中，v-model 不再是语法糖的简单封装，而是基于 modelValue prop 和 update:modelValue 事件的显式约定。要让自定义组件支持双向绑定，关键在于正确暴露 prop、触发更新事件，并可选地支持自定义修饰符或多个 v-model。
基础写法：响应 modelValue 并触发 update 事件
组件需接收 modelValue prop，并在值变化时（如用户输入）通过 $emit('update:modelValue', newValue) 通知父组件：
- 在
defineProps中声明modelValue: { type: [String, Number, Boolean], default: '' } - 用
defineEmits声明['update:modelValue'] - 将原生元素的
v-model指向modelValue，并监听其变更（如@input或@change）
例如，一个基础输入框组件：
<template><input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
</template>
支持自定义 v-model 名称（如 v-model:title）
当需要多个双向绑定时（如表单中同时绑定 title 和 content），可通过 defineModel（Vue 3.4+）或手动声明实现：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 使用
defineModel('title')可直接获取响应式模型引用，自动处理 prop 和事件 - 旧版本可用
defineProps({ title: String })+defineEmits(['update:title'])，并在模板中用:value="title"和@input="$emit('update:title', $event.target.value)" - 父组件使用
<MyInput v-model:title="post.title" />
处理修饰符（.lazy、.number、.trim）
Vue 3 不自动解析修饰符，需手动判断并响应：
- 在组件 props 中接收
modelModifiers: { default: () => ({}) } - 检查
modelModifiers.lazy === true时改用@change替代@input - 检查
modelModifiers.number时，emit 前转为数字：parseFloat($event.target.value) - 检查
modelModifiers.trim时，emit 前调用.trim()
结合 defineModel 简化开发（推荐 Vue 3.4+）
defineModel 是最简洁的方式，它返回一个响应式 ref，读写即触发更新：
-
const model = defineModel()→ 默认绑定modelValue -
const title = defineModel('title')→ 绑定title，支持v-model:title - 模板中直接用
v-model="model"或v-model="title"，无需手动 emit - 修饰符也自动生效（如
v-model.number会自动转数字）
不复杂但容易忽略细节，关键是理解 v-model 的本质是 prop + 事件契约，而不是魔法。
