v-model 本质是 prop + 自定义事件的语法糖，等价于 :model-value="text" @update:model-value="text = $event"；子组件需接收 modelValue prop、声明 update:modelValue 事件并手动 emit。

Vue 3 中自定义事件配合 v-model 实现双向绑定，本质是用事件把子组件内部变化“通知”出去，让父组件能及时更新数据。v-model 不是魔法，它只是语法糖，背后就是 prop + 自定义事件的协作。

明确 v-model 的等价写法

<myinput v-model="text"></myinput> 等价于：

<MyInput :model-value="text" @update:model-value="text = $event" />

也就是说，子组件必须：

• 接收 modelValue（或带短横线的 model-value）这个 prop
• 在值变化时，触发名为 update:modelValue 的事件

这个 update:modelValue 就是你需要手动 emit 的自定义事件。

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

子组件中如何用自定义事件完成绑定

你需要三步：声明 prop、声明 emit、在合适时机触发事件。

• 声明接收 modelValue

  const props = defineProps({
    modelValue: { type: [String, Number, Boolean], default: '' }
  })

• 声明可触发的自定义事件

  

  vue-admin-change-reviewer

  审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

  下载

  const emit = defineEmits(['update:modelValue'])

• 在用户操作时触发该事件（比如输入框内容变化）

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

  或者封装成方法：

  const handleInput = (e) => {
    emit('update:modelValue', e.target.value)
  }

支持修饰符时，自定义事件要加判断逻辑

v-model 修饰符（如 .number、.trim）不会自动生效，需你在 emit 前手动处理：

• 先接收修饰符对象：

  const props = defineProps({
    modelValue: String,
    modelModifiers: { default: () => ({}) }
  })

• 在 emit 前根据修饰符加工值：

  const handleInput = (e) => {
    let value = e.target.value
    if (props.modelModifiers.trim) value = value.trim()
    if (props.modelModifiers.number) value = parseFloat(value) || 0
    emit('update:modelValue', value)
  }

多个 v-model 场景下，自定义事件名要对应

比如 <myform v-model:title="title" v-model:content="content"></myform>：

• 子组件接收 title 和 content 两个 prop
• 分别 emit 'update:title' 和 'update:content'
• 对应的事件名必须严格匹配 update:xxx 格式，Vue 才能识别

不复杂但容易忽略细节，关键是理解 v-model 的本质是 prop + 事件契约，而不是魔法。