Vue 3 中自定义事件怎么配合 v-model 实现双向绑定-Vue.js-PHP中文网

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

vue 3 中自定义事件怎么配合 v-model 实现双向绑定

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

明确 v-model 的等价写法

等价于：

<myinput :model-value="text"></myinput>

也就是说，子组件必须：

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

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

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

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

声明接收 modelValue

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

声明可触发的自定义事件

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

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

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

下载
```
<input :value="props.modelValue">
```
或者封装成方法：
```
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)
}