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

Question

在这个版本的@ionic/vue@0.5.5.2我不能使用组件和分配引用(<登录ref Modal=" />)在Modal组件(Login.vue)中关闭它，所以我不知道如何从Login.vue关闭它。我留下我的代码:

Home.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>

And my 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。closemmodal()但是没有运气，提前感谢您的帮助。

Answer 1

我确定解决这个问题的最好和最简单的方法是调用modalController的dismiss()函数。

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

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

接下来我们可以像这样关闭modal:

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

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

Answer 2

我通过传递一个prop "close"使用函数closeModal并定义道具"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()
            
        },

Answer 3

我想你可以打电话给

modalController.dismiss()

关闭任何打开的对话框…而且emit应该已经工作了，没有看到那个代码

Answer 4

<!-- ./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>