Vue3中如何在defineEmits里访问组件props变量？

核心原因 #

defineEmits在模块作用域执行，会被提升到组件setup()函数之外，因此无法访问组件内声明的props变量，这就是你遇到报错的根源。

重构方案 #

方案一：触发事件前手动验证（推荐） #

把原本写在defineEmits里的验证逻辑，移到调用emit的时机。可以封装一个专门的函数来处理create事件的触发，内置验证规则：

<script setup>
const props = defineProps({
  dataKey: {
    type: String,
    default: 'id',
  },
})
// 先定义所有需要的CRUD事件，无需在此写验证
const emit = defineEmits(['create', 'update', 'delete'])

// 封装触发create事件的函数，自带验证逻辑
const fireCreate = (payload) => {
  // 验证规则：仅当payload不包含dataKey对应的键时，才触发事件
  if (!payload[props.dataKey]) {
    emit('create', payload)
  }
}
</script>

之后在组件内需要触发创建事件的地方，直接调用fireCreate(payload)即可，逻辑清晰且避开了defineEmits的限制。

方案二：混合选项式写法（不推荐） #

如果非要在事件定义阶段做验证，可以改用组件选项的方式导出emits配置，这种方式能访问到props：

<script>
export default {
  props: {
    dataKey: {
      type: String,
      default: 'id',
    },
  },
  emits: {
    create(payload) {
      // 返回true表示事件合法，允许触发
      return !payload[this.dataKey]
    }
  }
}
</script>

<script setup>
const props = defineProps(['dataKey'])
const emit = defineEmits(['create'])
</script>

这种写法需要混合选项式与组合式，代码不够简洁，一般不推荐使用。

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