v-model关联组件：为何methods中更新modelValue无效，模板写法正常？

我使用v-model关联父子组件，尝试将输入值传递给父组件时，最初在script的methods中实现的写法返回undefined，无法正常工作；改为在模板中直接通过@input触发$emit的写法后恢复正常。

最初的无效代码 #

<template> 
  <input
    :value="modelValue"
    type="text"
    class="form-control"
  />
</template>
<script>
export default {
  name: "Input",
  props: {
    modelValue: [String, Number],
  },
   methods: {
     uptadeInput(e) {
       this.$emit("uptade:modelValue", e.target.value);
     },
   },
};
</script>
<style></style>

修改后的有效代码 #

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    type="text"
    class="form-control"
  />
</template>
<script>
export default {
  name: "Input",
  props: {
    modelValue: [String, Number],
  },
};
</script>

问题原因 #

• 方法未绑定到输入事件：最初的代码里，input标签没有添加@input="uptadeInput"绑定事件处理方法，导致uptadeInput方法从来没有被调用过，自然不会触发$emit传递值。
• 两处拼写错误：
  1. 方法名uptadeInput少了一个字母d，正确应为updateInput；
  2. $emit的事件名uptade:modelValue同样少了d，而v-model默认监听的是update:modelValue事件，事件名不匹配会导致父组件无法接收到更新通知。

修改后的写法直接在模板中绑定@input事件，并正确拼写了update:modelValue事件名，所以能正常触发值更新，父组件的v-model也能正确响应。

内容的提问来源于stack exchange，提问作者Mustafo Yakubov