Launch action sheet on parent component from child modal

Hi, I have a parent component which has an action-sheet. It also has a child modal component. The action-sheet needs to be launchable from both the parent component and the modal child. Ordinarily in Vue we can emit an event from the child component and consume that in the parent e.g.

Modal (child) component:

export default defineComponent({
  name: 'myModal',
  components: { ... },
  setup(props, { emit }) {
    const closeModal = () => {
      modalController.dismiss()
    }

    const launchActionSheetOnParent = () => {
      emit('launchActionSheet')
    }

    return {
      closeModal,
      launchActionSheetOnParent,
    }
  },
})

However, in the parent component, the modal is created like this:

const initModal = async () => {
  const modal = await modalController.create({
    component: myModal,
  })
  return modal.present()
}

How does the parent listen for the emitted event, in this scenario?

Maybe create an actionSheetInstance in setup() on the parent component and pass it as a componentProp in modalController.create. Then on modal component, you can access the actionSheetInstance as a prop

You know you can create an action sheet in the template? There is no need to pass the instance around like this… it will work, but I think there is a better, more straightforward approach where you are just setting a prop which with make it happen.