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

Question

在这个版本的@ionic/vue@0.5.5.2 中，我不能使用组件并为其分配引用（）以在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

<!-- ./modal.vue -->

<template>
  <ion-header>
    <ion-toolbar>
      <ion-button shape="round" fill="clear" @click="modalController.dismiss()">
          <ion-icon slot="icon-only" :icon="arrowBackOutline" />
        </ion-button>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    {{ content }}
  </ion-content>
</template>

<script lang="ts">
import { IonButton, IonHeader,  IonToolbar, IonContent } from '@ionic/vue';
import { arrowBackOutline } from 'ionicons/icons';
import { modalController } from "@ionic/vue";

export default {
  name: 'Modal',
  components: { IonButton, IonHeader, IonToolbar, IonContent },
  setup(){
    const content = 'Content';
    return {
      content,
      modalController,
      arrowBackOutline,
      IonHeader,
      IonToolbar
    }
  }
}
</script>

Answer 2

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

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

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

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

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

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

Answer 3

我想你可以打电话

modalController.dismiss()

关闭任何打开的对话框...发射也应该可以工作，但没有看到该代码

Answer 4

我通过使用函数 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()
            
        },