无法在 Ionic-vue 5.5.2 中关闭模态

Question

在这个版本的@ionic/vue@0.5.5.2 中，我无法使用组件并为其分配引用（< Login ref="modal"/>）以在 Modal 组件 (Login.vue) 中关闭它，因此我不知道如何从 Login.vue 关闭它。我留下我的代码：

主页.vue

<template>
<ion-page>
    <ion-header>
        <ion-toolbar>
            <ion-title>
                Title
            </ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content class="auth-form">

        <ion-grid>
            <ion-row>
                <ion-col align-self-center>
                    <ion-button @click="openModal" expand="block" color="primary">Registrarme</ion-button>

                    <span class="divider line one-line">o</span>

                    <span class="already">¿Tienes una cuenta?</span>

                    <ion-button @click="openModal" expand="block" color="danger">Iniciar sesión</ion-button>
                </ion-col>
            </ion-row>
        </ion-grid>
       
    </ion-content>

</ion-page>
</template>

<script>
import {
    IonContent,
    modalController,
    IonTitle,
    IonToolbar,
    IonHeader,
    IonButton,
    IonCol,
    IonRow,
    IonGrid,
    IonPage
} from '@ionic/vue';
import Login from '../views/Login.vue';

export default {
    name: 'inicio',
    components: {
       
        IonContent,
        IonTitle,
        IonToolbar,
        IonHeader,
        IonButton,
        IonCol,
        IonRow,
        IonGrid,
        IonPage
    },
    data() {
        return {
            modal: '',
            isOpen: false,
        }
    },

    methods: {
        async createModal() {
            this.modal = await modalController.create({
                component: Login,
                componentProps: {
                  title: 'Iniciar sesión'
              },
                
            })
        },
        async openModal() {
            await this.createModal()
            this.isOpen = true
            this.modal.present()
        },
        closeModal() {
            this.isOpen = false
            this.modal.dismiss().then(() => {
                this.modal = null;
            });
        },
    },
}
</script>

还有我的 Login.vue：

<template>
<ion-page>
    <ion-header translucent>
        <ion-toolbar>
            <ion-title>{{ title }}</ion-title>
            <ion-buttons slot="end">
                <ion-button @click="cerrarmodal">Cerrar</ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>

    <ion-content>

        <ion-list>

            <ion-item>
                <ion-label>Email</ion-label>
                <ion-input type="text"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label>Contraseña</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>

        </ion-list>

        <ion-button color="primary" expand="block">Ingresar</ion-button>

    </ion-content>

</ion-page>
</template>

<script>
import {
    IonButtons,
    IonContent,
    IonButton,
    IonToolbar,
    IonHeader,
    IonTitle,
    IonList,
    IonLabel,
    IonInput,
    IonItem,
    IonPage
} from '@ionic/vue';
import {
    defineComponent
} from 'vue';

export default defineComponent({
    name: 'login',
    props: {
        title: {
            type: String,
            default: 'Super Modal'
        },
        closeMe: {
            type: Function,
            default: () => {
                ''
            }
        },
    },
    data() {
        return {
            content: 'Content',
        }
    },
    methods: {
        cerrarmodal() {
            this.$emit('close', {
                foo: 'bar'
            })
            // Not working
            this.$parent.closeModal()
        },
   
    },
    components: {
        IonButton,
        IonButtons,
        IonToolbar,
        IonList,
        IonInput,
        IonLabel,
        IonItem,
        IonPage,
        IonHeader,
        IonTitle,
        IonContent
    },
});
</script>

我已经尝试过 $emit 和 $parent.closeModal() 但没有成功，提前感谢您的帮助。

Answer 1

我确认解决此问题的最佳且简单的方法是调用dismiss()的函数modalController。

首先我们必须导入modalController我们的模态组件：

import { modalController } from "@ionic/vue";

接下来我们可以像这样关闭模态：

async function close() {
  await modalController.dismiss();
}

重要提示：我使用等待是因为dismiss返回一个承诺，所以使用它很重要。

Answer 2

我通过使用函数 closeModal 传递道具“close”并在模态组件中定义道具“close”，然后使用 this.close 调用它来解决它

this.modal = await modalController.create({
                component: Login,
                componentProps: {
                  title: 'Iniciar sesión',
                  close: () => this.closeModal()
              },
                
            })

在模态组件中：

props: {
        title: {
            type: String,
            default: 'Super Modal'
        },
        close: { type: Function }
    },

cerrarmodal() {
            this.$emit('close', {
                foo: 'bar'
            })
            this.close()
            
        },