PrimeVue ConfirmDialog：accept函数内Emit无法正常触发

核心问题 #

你代码中的关键错误是Vue 3选项式API中声明自定义事件的选项名错误：子组件里用了emit，但Vue 3要求用emits，这会导致Vue无法正确识别事件，进而影响emit的触发逻辑。

修复步骤及代码 #

1. 修正子组件代码

将emit选项改为emits，并推荐从ctx中解构出emit简化调用：

<template>
  <h1>Hello, I am the Child</h1>
  <Button type="button" label="PrimeVue Button" @click="handleClick"></Button>
</template>

<script>
import { useConfirm } from "primevue/useconfirm";

export default {
  // 关键：将emit改为emits，正确声明自定义事件
  emits: ['callParent'],
  setup(props, { emit }) { // 解构出emit，替代ctx.emit
    const confirm = useConfirm();

    const handleClick = () => {
      console.log("clicked");
      confirm.require({
        message: "Do you want to delete this record?",
        header: "Delete Confirmation",
        icon: "pi pi-info-circle",
        acceptClass: "p-button-danger",
        accept: () => {
          // 使用解构后的emit，事件名与emits中声明的一致
          emit("callParent");
        },
      });
    };
    return { handleClick };
  },
};
</script>

2. 父组件代码（保持原逻辑即可）

父组件模板中@call-parent会被Vue自动映射为驼峰的callParent，与子组件emit的事件名兼容：

<template>
  <div id="app">
    <h2>PrimeVue Issue Template</h2>
    <child @call-parent="callback"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: { Child },
  setup(props, ctx) {
    const callback = () => {
      console.log("callback clicked");
    };
    return { callback };
  },
};
</script>

3. 确认ConfirmService注册

确保在应用入口文件（如main.js）中正确注册PrimeVue的ConfirmService，否则对话框功能无法正常工作：

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import ConfirmService from 'primevue/confirmservice';
import Button from 'primevue/button';
import App from './App.vue';

const app = createApp(App);
app.use(PrimeVue);
app.use(ConfirmService); // 必须注册此服务
app.component('Button', Button);
app.mount('#app');

验证逻辑 #

修复后，点击子组件按钮打开确认框，点击确认按钮后，父组件的callback函数会触发，控制台会输出callback clicked。

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