How to react on emitted events, when navigating in ion-modals

Ionic Framework Ionic Vue
1

Hi there,

I’m currently integrating a sub-navigation within a ion-modal component like described here: How to Navigate in Ionic Modals with ion-nav - Ionic Blog

So in a modal I’m using ion-nav-links to do the navigation and passing the component to the ion-nav-link, which I want to render. I can also pass properties to this components. But is it also somehow possible to react on events, which got emitted from this component?
I would have expected something like this to be working:

  <ion-nav-link
    router-direction="forward"
    :component="subComponent"
    :componentProps="{
      modelValue: modelValue,
      '@update:modelValue': onUpdateModelValue
    }"
  >
    ...
  </ion-nav-link>

However this is not possible. Is there any way workaround I can use?

What I’m trying to achieve: The modal shows different properties, which can be edited. Clicking on a property opens the actual editor in a new page (like shown in the tutorial). After the new value in the editor got selected, the user gets returned to the modal, where the selected value is used. Passing it as a query param is no option.
I’ve tried working with ion-menu components instead of ion-nav - which actually works - but then the modal animations are not working properly anymore.
Another ion-modal on top would also work, but modals can only be animated from bottom to top, not from right to left, like shown in the tutorial.

Are there any other ideas for this use case?

2

Ionic VueJS: How to Navigate in Ionic Modals with IonNav in Vue JS - YouTube - This is a vue specific example and a link to the blog post is included

3

Thanks, I was hoping there is more like an event based approach to keep the encapsulation. The problem with this solution is, I cannot send events from the ModalDetailHome component to the ModalHome component.
Imagine you have a selector in the ModalHomeDetail component and you select an entry. How does the ModalHome component get notified about the selection?

4

my answer to that is state management or a library like tiny-emitter - npm (npmjs.com)