如何在Vue的setup()中触发携带多参数的emit事件？

核心原因及修复方案 #

1. 父组件事件绑定错误（最常见原因） #

如果父组件绑定emit事件时写成了@setTray="setTray()"，这种写法会立即执行函数，且不会传递子组件emit过来的参数，导致setTray接收的参数全为undefined。

正确绑定方式：

• 直接绑定函数名，让emit的参数自动传递给函数形参：

  <ChildComponent @setTray="setTray" />
  

• 如果需要额外添加自定义参数，使用箭头函数显式接收emit参数：

  <ChildComponent @setTray="(tray, pk) => setTray(tray, pk, '自定义额外参数')" />
  

2. 子组件参数本身未定义 #

确认子组件中的pk变量已正确声明或赋值（比如从props获取、用ref定义、接口返回等），如果pk本身是undefined，传递后父组件自然也会拿到undefined。

完整示例代码 #

父组件 #

<template>
  <ChildComponent @setTray="setTray" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  methods: {
    setTray(tray, pk) {
      alert(tray)
      alert(pk)
    }
  }
}
</script>

子组件 #

<script>
export default {
  setup(props, ctx) {
    // 确保pk已定义并赋值
    const pk = 'user-123'
    // 传递多个参数的正确写法
    ctx.emit('setTray', 'profile-task', pk)
  }
}
</script>

传递单个对象参数的写法 #

如果想传递一个对象作为参数，需要对应修改父组件的函数形参：

子组件 #

ctx.emit('setTray', { tray: 'profile-task', pk: pk })

父组件函数 #

setTray(payload) {
  alert(payload.tray)
  alert(payload.pk)
}

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