Vue3中$emit传参问题：如何像Vue2一样获取子组件发射的值？

问题原因 #

Vue3的模板事件处理逻辑与Vue2存在差异，直接在模板中使用...arguments传递emit参数时，arguments会被包装为Promise，导致无法正确获取子组件传递的原始值。

修正写法 #

方式一：使用$event接收单个参数 #

适用于子组件仅传递一个值的场景：

<!-- Parent.vue -->
<Child @getValue="parseValue('someparameter', $event)" />

<script>
export default {
  methods: {
    parseValue(param, val) {
      // val即为子组件传递的原始值
    }
  }
}
</script>

方式二：用箭头函数接收所有参数 #

适用于子组件传递多个参数的场景：

<!-- Parent.vue -->
<Child @getValue="(...args) => parseValue('someparameter', ...args)" />

<script>
export default {
  methods: {
    parseValue(param, val) {
      // val正确获取子组件传递的值
    }
  }
}
</script>

子组件Vue3兼容写法 #

不管是选项式API还是组合式API，emit核心逻辑一致：

• 选项式API：

<!-- Child.vue -->
<script>
export default {
  methods: {
    someFunction() {
      const value = '要传递的值';
      this.$emit('getValue', value);
    }
  }
}
</script>

• 组合式API（setup语法糖）：

<!-- Child.vue -->
<script setup>
const emit = defineEmits(['getValue']);

const someFunction = () => {
  const value = '要传递的值';
  emit('getValue', value);
}
</script>

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