我如何使用离子模态控制器捕获模态 this.$emit答案

【问题标题】：How can i catch a modal this.$emit using ionic modal controller我如何使用离子模态控制器捕获模态 this.$emit
【发布时间】：2019-11-27 14:42:59
【问题描述】：

您好，我正在将我的部分 Web 代码转换为 ionic-vue 应用程序，我想知道我们是否可以使用经典 vue 组件的 ionic 模态控制器从我的模态中捕获 this.$emit。

基本上我想翻译

<NewAppointmentModal @onSuccess="handleAppointmentCreation"/>

到

this.$ionic.modalController.create({ component: NewAppointmentModal}).then(m => m.present())
//how can i catch the onSuccess event like before

【问题讨论】：

标签： vue.js ionic-framework ionic-vue

【解决方案1】：

Brian 回答正确，但在 Vue 3 中有一个代码行更改：ParentComponent.vue

 this.$on('close', () => {
       this.$ionic.modalController.dismiss()
   })

【讨论】：

你知道我可以用什么来代替“this.$on”，因为它已被弃用吗？

【解决方案2】：

父组件.vue

public openModal() {
    return this.$ionic.modalController
    .create({
      component: ModalComponent,
      componentProps: {
        data: {
          content: 'New Content',
        },
        propsData: {
          //user_id: user_id
        },
        parent: this,
      },
    })
    .then(m => m.present({

    }))
}

public mounted() {
   this.$on('close', (foo) => {
       this.$ionic.modalController.dismiss()
   })
}

ModalComponent.vue

<template>
   <ion-button @click="dismissModal()">Close</ion-button>
</template>
<script>
   dismissModal() {
     this.$parent.$emit('close', { foo: 'bar' })
   }
</script>

【讨论】：