Vue3中子组件通过$emit更新父组件props值失败，原因何在？

咱们一步步拆解代码里的问题，这几个点共同导致了更新失败：

1. Vue3 setup 函数中无法使用 this #

在Vue3的setup生命周期钩子中，不存在this上下文，所以你在onChangeStart里调用this.$emit完全无效，根本触发不了自定义事件。

要在setup中触发事件，需要从setup的第二个参数（上下文对象）里解构出emit来使用：

setup(props, { emit }) {
  const onChangeStart = (event) => {
    // 这里用解构出来的emit方法
    emit('update', Number(event.target.value))
  }
  return { onChangeStart }
}

2. 自定义事件名称不匹配 #

父组件监听的是@update事件，但子组件里写的是$emit('update: start', ...)——不仅事件名多了多余的空格，还和父组件监听的名字完全对不上。要么统一改成update，要么遵循Vue的v-model规范用update:start（注意无空格），同时父组件也要对应调整。

3. Input值的类型不匹配问题 #

input的event.target.value返回的是字符串类型，而你的startValue是数字类型的ref，直接传递会导致类型混乱（比如输入2，父组件的startValue会变成字符串"2"，后续可能引发其他逻辑问题），所以需要用Number()把值转成数字。

可选优化：遵循Vue的v-model语法糖（推荐） #

如果想让代码更规范简洁，可以用Vue的自定义v-model语法：

• 父组件改成：<SettingsBoard :max="maxValue" v-model:start="startValue" />
• 子组件的emit对应改成：emit('update:start', Number(event.target.value))（注意update:start没有空格）

完整修复后的代码 #

父组件（Main.vue） #

<template>
  <div>
    <span>Main</span>
    <!-- 保持原@update写法，或者替换成下面的v-model语法 -->
    <SettingsBoard :max="maxValue" :start="startValue" @update="startValue = $event"/>
    <!-- 可选v-model写法：<SettingsBoard :max="maxValue" v-model:start="startValue" /> -->
  </div>
</template>
<script>
import {ref} from 'vue'
import SettingsBoard from "@/components/SettingsBoard";
export default {
  name: "Main",
  components: { SettingsBoard },
  setup() {
    const startValue = ref(1)
    const maxValue = ref(2);
    return { startValue, maxValue }
  },
}
</script>

子组件（SettingsBoard.vue） #

<template>
  <div>
    <h3>Settings board</h3>
    <div>
      <span>start value</span>
      <label>
        <input :value="start" @input="onChangeStart" type="number" step="1" min="0">
      </label>
    </div>
    <div>
      <h1>{{start}}</h1>
    </div>
  </div>
</template>
<script>
export default {
  name: "SettingsBoard",
  props: {
    start: {type: Number, required: true},
    max: {type: Number, required: true},
  },
  // 从setup上下文解构出emit
  setup(props, { emit }) {
    const onChangeStart = (event) => {
      // 转成数字，并且事件名和父组件保持一致
      emit('update', Number(event.target.value))
      // 如果用v-model:start，就改成 emit('update:start', Number(event.target.value))
    }
    return { onChangeStart }
  },
}
</script>

这样修改后，子组件就能正常触发父组件的startValue更新了。

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