Vue.js中v-model双向绑定本质是父组件用语法糖简化属性绑定与事件监听，子组件通过emit通知父组件更新；Vue 3统一为modelValue/update:modelValue，支持多v-model；Vue 2则固定为value/input；props单向不可变，必须通过emit触发父级更新。

Vue.js 中通过 emit 配合 v-model 实现组件双向绑定，本质是父组件用 v-model 语法糖简化了 :value + @input（Vue 2）或 :modelValue + @update:modelValue（Vue 3）的写法，而子组件内部靠 emit 主动通知父组件更新数据。

Vue 3 中 v-model 的默认行为（推荐）

Vue 3 将 v-model 统一为基于 modelValue 的约定，更清晰、可扩展性更强：

• 父组件写法简洁：<MyInput v-model="searchText" />
• 子组件接收 modelValue 作为 prop，并在值变化时 emit('update:modelValue', newValue)
• 子组件中通常用 computed 双向同步：
  <template>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  </template>
  <script setup>
  const props = defineProps({ modelValue: String });
  const emit = defineEmits(['update:modelValue']);
  </script>

自定义 v-model 名称（支持多字段绑定）

一个组件可同时支持多个 v-model，只需指定不同参数名：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 父组件：<UserForm v-model:username="name" v-model:email="mail" />
• 子组件声明：defineProps({ username: String, email: String })
• 触发更新：emit('update:username', 'Alice') 或 emit('update:email', 'a@b.com')
• 这样就能在一个组件内管理多个受控状态，互不干扰

Vue 2 兼容写法（如仍需维护旧项目）

Vue 2 默认使用 value 和 input，逻辑一致但命名固定：

立即学习“前端免费学习笔记（深入）”；

• 子组件接收 value prop，监听输入并 emit('input', newValue)
• 父组件 <MyInput v-model="msg" /> 等价于：
  <MyInput :value="msg" @input="val => msg = val" />
• 注意：Vue 2 不支持多个 v-model，需手动用 @xxx + :yyy 模拟

为什么不能只靠 props 下传？

props 是单向的，子组件无法直接修改它。若强行 this.value = 'new'，Vue 会警告“Avoid mutating a prop directly”。正确路径是：
→ 父组件提供数据（prop）
→ 子组件展示并响应交互
→ 通过 emit 告知父组件“该更新了”
→ 父组件响应式更新自身数据 → 触发子组件重新渲染