Ionic Vue PopoverController/ModalController with custom events

Ionic Framework Ionic Vue
1

Hello there,

I am trying use the PopoverController in Ionic 6 with Vue 3 (Composition API). Now, as I can not just add an @custom-event to my popover, I do not know, how to respond to custom events from my popover inside the parent component. Of course you could pass callbacks as props, but thats pretty much an anti-pattern in vue.
Any ideas on how to pass custom events from the popover created by the popover controller to the parent?

2

How about some code showing what you have tried so far?

3

Well, the usual way would be something like
<ion-popover trigger="popover-trigger" @my-event="myFunc()">
but there is no direct <ion-popover> element with the controller. So with the controller the programmatic way with vue in my understanding would be something like

const openPopover = async () => {
      const popover = await popoverController
        .create({
          component: PopComponent,
          cssClass: 'some-class',
          componentProps: {
          },
        })
        **popover.on("my-event", () => console.log("Event received"));**
        return popover.present();
    }

But the popover element does not have an “on” method. Also tried popover.addEventListener("my-event", () => console.log("Event received")), but both times, even though the emit was called inside the popover, no reaction inside the parent.

4

there is a great little utility I have used in the past

5

I have an ion-radio-group within the popover component and this works for me.

const popover = await popoverController.create({
    component: ListingSort,
    event: event,
    componentProps: { selected: params.value.sort },
}) as any

await popover.present()

popover.el.querySelector('ion-radio-group').addEventListener('click', (event: any) => {
    sort(event.target.value)
    popover.dismiss()
})