Vue3中如何捕获Ionic modalController弹出组件触发的$emit事件

报错原因：Vue3 已彻底移除组件实例上的$on、$off、$once事件 API，因此原有 Vue2 环境下的事件监听方案失效，可按以下三种方案实现需求：

方案1：通过 componentProps 传递回调函数（最推荐，无额外依赖） #

这是 Ionic 官方推荐的模态框通信方式，不需要借助额外工具，逻辑清晰无内存泄漏风险。

父组件创建模态框时传入自定义回调 #

// 父组件内创建模态框的逻辑
const openModal = async () => {
  const modal = await this.$ionic.modalController.create({
    component: 你的模态框组件名,
    componentProps: {
      // 直接把处理逻辑作为回调传给模态框组件
      onUpdateMaterialList: () => {
        modal.dismiss()
        // 其他业务逻辑可直接写在这里
      }
    }
  })
  await modal.present()
}

模态框内组件调用触发 #

如果是选项式 API 写的模态框组件：

// 模态框组件内先声明props
export default {
  props: {
    onUpdateMaterialList: Function
  },
  methods: {
    触发更新的方法() {
      // 执行业务逻辑后调用传入的回调
      this.onUpdateMaterialList?.()
    }
  }
}

如果是<script setup>语法：

const props = defineProps({
  onUpdateMaterialList: Function
})

// 需要触发事件的位置直接调用
props.onUpdateMaterialList?.()

方案2：关闭模态框时携带标识参数（适合仅关闭时需通信的场景） #

如果你的事件触发时机和模态框关闭时机一致，可以直接用 Ionic 自带的关闭回传参数能力：

模态框内关闭时携带自定义参数 #

// 模态框组件内执行关闭的逻辑
async function closeModal() {
  await this.$ionic.modalController.dismiss({
    action: 'updateMaterialList',
    // 也可以携带其他需要回传给父组件的数据
  })
}

父组件监听关闭事件判断动作 #

// 父组件创建模态框时添加关闭监听
const openModal = async () => {
  const modal = await this.$ionic.modalController.create({
    component: 你的模态框组件名
  })
  // 监听模态框关闭回调
  modal.onDidDismiss().then(res => {
    if (res.data?.action === 'updateMaterialList') {
      // 执行对应业务逻辑
      console.log('材料列表更新事件触发')
    }
  })
  await modal.present()
}

方案3：mitt 事件总线（适合模态框不关闭时多次触发事件的场景） #

如果需要模态框在不关闭的情况下多次触发事件，可引入轻量级事件库 mitt 实现全局通信：

1. 安装依赖

npm install mitt

2. 新建事件总线实例utils/eventBus.js

import mitt from 'mitt'
export const eventBus = mitt()

3. 模态框内触发事件

import { eventBus } from '@/utils/eventBus'

// 需要触发事件的位置
eventBus.emit('updateMaterialList')

4. 父组件监听事件，注意销毁时解绑避免内存泄漏

import { eventBus } from '@/utils/eventBus'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  eventBus.on('updateMaterialList', handleUpdateList)
})

onUnmounted(() => {
  eventBus.off('updateMaterialList', handleUpdateList)
})

function handleUpdateList() {
  this.$ionic.modalController.dismiss()
  // 其他业务逻辑
}

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