跳至主要内容
版本：v8

故障排除

本指南介绍了使用 Ionic Vue 开发时可能遇到的一些常见问题。

您认为应该在此处介绍的问题？告诉我们！

无法解析组件​

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

如果您看到此警告，则很可能是您没有从 @ionic/vue 导入组件。默认情况下，所有 Ionic Vue 组件都是本地注册的，这意味着每次要使用它们时都需要导入它们。

如果不导入组件，您只会获得底层 Web 组件，而 Vue 特定功能（如 v-model）将无法使用。

要解决此问题，您需要从 @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` attributes are deprecated  vue/no-deprecated-slot-attribute

Ionic Vue 中使用的插槽是 Web 组件插槽，它们与 Vue 2 中使用的插槽不同。不幸的是，这两个 API 非常相似，您的 linter 很可能将两者混淆。

所有 Ionic Vue 启动器都已关闭此规则，但您也可以通过将以下内容添加到您的 .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 管理 ref 的方式存在限制，我们无法在此处执行相同的操作。

有关更多信息，请参阅 快速入门指南。

页面过渡不起作用​

为了使页面过渡正常工作，每个页面必须在根目录处包含一个 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();

这样做是为了与开发人员如何在他们的 Vue 模板中使用 kebab-case 绑定事件保持一致：https://vuejs.ac.cn/guide/essentials/component-basics.html#case-insensitivity

内容

编辑此页面