在 vue 3 中使用 v-model 绑定自定义组件时，必须显式监听原生事件（如 @input）并触发 update:modelvalue 事件；若仅定义方法却不绑定事件，v-model 将无法响应输入变化。

在 vue 3 中使用 v-model 绑定自定义组件时，必须显式监听原生事件（如 @input）并触发 update:modelvalue 事件；若仅定义方法却不绑定事件，v-model 将无法响应输入变化。

要使自定义组件支持 v-model，需同时满足两个核心条件：接收 modelValue prop 和 在值变更时触发 update:modelValue 事件。你提供的第一段代码中，虽然定义了 uptadeInput 方法，但未将其绑定到 <input> 元素的 @input（或 @change）事件上，因此该方法永远不会执行，$emit('update:modelValue', ...) 也就无从触发——这正是 v-model 失效的根本原因。

✅ 正确做法是将事件监听与方法调用显式关联：

<template><input :value="modelValue">
    type="text"
    class="form-control"
  />
</template><script>
export default {
  name: "Input",
  props: {
    modelValue: [String, Number],
  },
  methods: {
    updateInput(e) {
      this.$emit('update:modelValue', e.target.value); // 注意事件名拼写：update（非 uptade）
    }
  }
}
</script>

⚠️ 注意事项：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 事件名必须为 'update:modelValue'（Vue 3 约定），拼写错误（如 'uptade:modelValue'）会导致父组件无法同步；
• 方法名建议使用语义清晰的 updateInput 而非 uptadeInput，避免低级拼写错误；
• 在 Vue 3 Composition API 中，更推荐使用 defineProps + defineEmits 显式声明：

<script setup>
const props = defineProps({
  modelValue: [String, Number]
})
const emit = defineEmits(['update:modelValue'])

const updateInput = (e) => {
  emit('update:modelValue', e.target.value)
}
</script>

? 总结：v-model 并非魔法——它本质是语法糖，等价于 :modelValue="xxx" + @update:modelValue="xxx = $event"。因此，子组件必须主动“发射”该事件，且发射时机必须由用户交互（如输入）触发。脱离事件绑定的方法定义，只是未被执行的函数，无法驱动响应式更新。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！