跳至主要內容
版本：v8

疑難排解

本指南涵蓋使用 Ionic Vue 開發時可能遇到的一些常見問題。

您有覺得應該在此涵蓋的問題嗎？ 請告訴我們！

無法解析元件​

[Vue warn]: Failed to resolve component: ion-button

如果您看到此警告，則很可能是您沒有從 @ionic/vue 匯入元件。預設情況下，所有 Ionic Vue 元件都是在本機註冊的，這表示您每次想要使用它們時都需要匯入它們。

若未匯入元件，您將只會取得底層的 Web 元件，而 v-model 等 Vue 特有的功能將無法運作。

若要解決此問題，您需要從 @ionic/vue 匯入元件，並將其提供給您的 Vue 元件

<template>
  <ion-button>Hello World</ion-button>
</template>

<script lang="ts">
  import { IonButton } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonButton },
  });
</script>

偏好一次性全域註冊您的元件嗎？我們已為您解決。我們的最佳化您的建置指南說明如何全域註冊 Ionic Vue 元件，以及使用這種方法時應注意的潛在缺點。

Slot 屬性已棄用​

`slot` attributes are deprecated  vue/no-deprecated-slot-attribute

Ionic Vue 中使用的 slot 是Web Component slots，它們與 Vue 2 中使用的 slots 不同。遺憾的是，兩者的 API 非常相似，而且您的 linter 可能會混淆兩者。

所有 Ionic Vue starter 都會關閉此規則，但您可以透過將以下內容新增至您的 .eslintrc.js 檔案來自行操作

module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  },
};

如果您使用的是 VSCode 且已安裝 Vetur 外掛程式，則您很可能是因為 Vetur 而收到此警告，而不是 ESLint。預設情況下，Vetur 會載入預設的 Vue 3 linting 規則，並忽略任何自訂的 ESLint 規則。

若要解決此問題，您需要使用 vetur.validation.template: false 關閉 Vetur 的樣板驗證。如需詳細資訊，請參閱Vetur Linting 指南。

元件上的方法不是函式​

若要在 Vue 中存取 Ionic Framework 元件上的方法，您需要先存取底層的 Web 元件執行個體

// ✅ This is correct
ionContentRef.value.$el.scrollToBottom();

// ❌ This is incorrect and will result in an error.
ionContentRef.value.scrollToBottom();

在其他架構整合 (例如 Ionic React) 中，這不是必需的，因為您提供的任何 ref 都會自動轉送到底層的 Web 元件執行個體。由於 Vue 管理 refs 的方式存在限制，因此我們無法在這裡執行相同的操作。

如需詳細資訊，請參閱快速入門指南。

頁面轉換無法運作​

為了使頁面轉換正確運作，每個頁面都必須在根目錄中具有 ion-page 元件

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">Hello World</ion-content>
  </ion-page>
</template>

<script lang="ts">
  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: {
      IonContent,
      IonHeader,
      IonPage,
      IonTitle,
      IonToolbar,
    },
  });
</script>

如需詳細資訊，請參閱IonPage 文件。

在 JavaScript 中繫結的 Ionic 事件未觸發​

在 JavaScript 中建立事件接聽程式 (例如 addEventListener) 時，事件名稱應以 kebab-case 撰寫

const modal = await modalController.create({
  component: Modal
});

modal.addEventListener('ion-modal-did-present', () => {
  ...
});

await modal.present();

這樣做的目的是為了與開發人員如何使用 kebab-case 在其 Vue 樣板中繫結事件的方式保持一致：https://vuejs.org/guide/essentials/component-basics.html#case-insensitivity

目錄

編輯此頁面