Quasar Dialog插件回调事件无法向上冒泡的问题排查求助

我想要实现一个通用的LocalMenu组件，内部通过<slot/>包裹菜单项，其中部分菜单项会通过Quasar的Dialog插件打开对话框。DialogMenuItem组件需要触发事件，通知外层组件对话框的操作结果。

但遇到了问题：点击菜单中的"Show me da Dialog!"，再选择对话框的"OK"后，控制台仅打印onOK，不会打印Event received in parent!——也就是emit('onDialogOK')触发的事件没有传递到IndexPage。

已将代码简化为最小示例，实际应用中使用了更复杂的自定义对话框组件，请问这是实现错误，还是需要提交Quasar的bug报告？

pages/IndexPage.vue #

<template>
  <q-page class="flex flex-center">
    <LocalMenu>
      <DialogMenuItem label="Show me da Dialog!" @onDialogOK="onDialogOK()" />
      <!-- other MenuItems -->
    </LocalMenu>
  </q-page>
</template>
<script setup>
import LocalMenu from 'src/components/LocalMenu.vue'
import DialogMenuItem from 'src/components/DialogMenuItem.vue'
function onDialogOK () {
  console.log('Event received in parent!')
}
</script>

components/LocalMenu.vue #

<template>
  <q-btn flat dense round icon="menu" aria-label="Local Menu" size="sm">
    <q-menu self="top left" auto-close>
      <q-list dense>
        <slot />
      </q-list>
    </q-menu>
  </q-btn>
</template>

components/DialogMenuItem.vue #

<template>
  <q-item clickable @click="onClick()">
    <q-item-section>{{ label }}</q-item-section>
  </q-item>
</template>
<script setup>
import { Dialog } from 'quasar'

const emit = defineEmits(['onDialogOK'])

defineProps({
  label: { type: String, required: true },
})

function onClick () {
  Dialog.create({
    title: 'Dialog',
    message: 'Please confirm...',
    cancel: true
  }).onOk(() => {
    console.log('onOK')
    emit('onDialogOK')
  })
}
</script>

原因 #

问题出在q-menu的auto-close属性上：当点击DialogMenuItem打开对话框时，对话框是挂载在body上的独立元素，q-menu会判定点击了外部区域，触发auto-close并直接销毁插槽内的DialogMenuItem组件。等到你点击对话框的"OK"时，DialogMenuItem已经被卸载，此时调用emit('onDialogOK')自然无法传递到父组件IndexPage。

解决方案 #

可以选择以下任意一种方式修复：

1. 禁用q-menu的auto-close，手动控制菜单关闭
   修改LocalMenu.vue中的q-menu，去掉auto-close，并对外暴露关闭方法：

<template>
  <q-btn flat dense round icon="menu" aria-label="Local Menu" size="sm">
    <q-menu self="top left" ref="menuRef">
      <q-list dense>
        <slot />
      </q-list>
    </q-menu>
  </q-btn>
</template>
<script setup>
import { ref } from 'vue'
const menuRef = ref(null)
defineExpose({
  closeMenu: () => {
    menuRef.value?.hide()
  }
})
</script>

然后在IndexPage.vue中调用关闭方法：

<template>
  <q-page class="flex flex-center">
    <LocalMenu ref="localMenuRef">
      <DialogMenuItem label="Show me da Dialog!" @onDialogOK="onDialogOK()" />
    </LocalMenu>
  </q-page>
</template>
<script setup>
import { ref } from 'vue'
import LocalMenu from 'src/components/LocalMenu.vue'
import DialogMenuItem from 'src/components/DialogMenuItem.vue'
const localMenuRef = ref(null)
function onDialogOK () {
  console.log('Event received in parent!')
  localMenuRef.value?.closeMenu()
}
</script>

2. 延迟emit事件，确保菜单销毁前完成事件传递
   在DialogMenuItem.vue的onOk回调中使用nextTick延迟emit：

<script setup>
import { Dialog, nextTick } from 'quasar'

const emit = defineEmits(['onDialogOK'])

defineProps({
  label: { type: String, required: true },
})

function onClick () {
  Dialog.create({
    title: 'Dialog',
    message: 'Please confirm...',
    cancel: true
  }).onOk(async () => {
    console.log('onOK')
    await nextTick()
    emit('onDialogOK')
  })
}
</script>

利用Vue的更新周期，确保在菜单组件销毁前完成事件触发。

3. 将DialogMenuItem通过teleport挂载到q-menu外部
   修改DialogMenuItem.vue，用teleport将组件挂载到body上：

<template>
  <teleport to="body">
    <q-item clickable @click="onClick()">
      <q-item-section>{{ label }}</q-item-section>
    </q-item>
  </teleport>
</template>

这种方式下，DialogMenuItem不会被q-menu的auto-close销毁，emit事件能正常传递。

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