Ionic Vue Modal 显示内容两次

Question

在 Ionic Vue 应用程序中，我尝试在模式中显示一些简单的内容。然而，内容总是显示两次。如果我使用离子页面 (https://ionicframework.com/docs/api/modal) 中的示例，也会发生同样的情况：

模态内容组件：

<template>
  <div>
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      {{ content }}
    </ion-content>
  </div>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

使用模态的组件：

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
  import { IonButton, IonContent, IonPage, modalController } from "@ionic/vue";
  import Modal from "../components/ItemModal.vue";

  export default {
    components: { IonButton, IonContent, IonPage },
    methods: {
      async openModal() {
        const modal = await modalController.create({
          component: Modal,
          cssClass: "my-custom-class",
          componentProps: {
            data: {
              content: "New Content",
            },
            propsData: {
              title: "New title",
            },
          },
        });
        return modal.present();
      },
    },
  };
</script>

有趣的是，模态框的内容组件显示了两次。

另外，props 和 data 不会传递给模态内容组件。

在 Vue Ionic 中使用模态时我是否遗漏了一些基本的东西？

Answer 1

原来我的模板中有两个ion-app 实例。幸运的是，Ionic 论坛中指出了这一点（不幸的是，该帖子已被删除）。

对于某些上下文，我们使用 ion-app 在 Vue 应用上下文中创建您的模态内容。然后，我们使用 Vue 的 Teleport 功能在 ion-modal 中渲染模态内容。由于您有两个 ion-app 实例，因此您的模态内容被创建并传送了两次。