ionic - 不推荐使用 `slot` 属性 - eslint-plugin-vue 已弃用 slot未使用的 fixed

如何解决ionic - 不推荐使用 `slot` 属性 - eslint-plugin-vue 已弃用 slot未使用的 fixed

我在 VS Code 中遇到以下错误：

if

我在 [vue/no-deprecated-slot-attribute] `slot` attributes are deprecated. eslint-plugin-vue 中安装了这两个插件

.eslintrc.js

这是规则：

  'extends': [
    'plugin:vue/vue3-essential','eslint:recommended'
  ],

应该怎么做才能避免这个问题？

编辑@tony19 的回答：

要解决该错误，请将 v-slot:fixed 应用于包装器：

'vue/no-deprecated-slot-attribute': 'off',

我使用了上述解决方案。但复习根本不起作用。

解决方法

已弃用 slot

linter rule page for vue/no-deprecated-slot-attribute 显示了以下示例代码，其中突出显示了问题和解决方案：

<template>
  <ListComponent>
    <!-- ✓ GOOD ?-->
    <template v-slot:name>...</template>
  </ListComponent>
  <ListComponent>
    <!-- ✗ BAD  ?-->
    <template slot="name">...</template>
  </ListComponent>
</template>

因此，<ion-refresher slot="fixed"> 应该更改为 <ion-refresher v-slot:fixed>。但是，这会导致不同的错误 (vue/valid-v-slot)，因为 Ionic 组件构建为 native Web Components（不是 Vue 组件）：

Named slots must use '<template>' on a custom element. (vue/valid-v-slot) eslint

要解决该错误，请将 v-slot:fixed 应用于 <template> 包装器：

<template v-slot:fixed>
  <ion-refresher>...</ion-refresher>
<template>

demo

未使用的 fixed

关于您 commented 的 'fixed' is defined but never used 错误，您在 SFC 中的 <script> 部分可能有一个名为 fixed 的未使用变量。只需删除该变量即可解决错误。

,

这个槽其实是指webcomponent的槽；
https://github.com/ionic-team/ionic-framework/issues/22236

Ionic 框架使用的插槽与 Vue 2 插槽不同。我们使用的插槽是 Web 组件插槽并且是有效用法：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots。

开发人员应该按照我们的文档使用 Web 组件槽来定位元素：https://ionicframework.com/docs/api/range#usage

检查以确保您的 eslint.js 具有以下规则：

  rules: {
    'vue/no-deprecated-slot-attribute': 'off',}

接下来打开 .vscode/settings.json 并添加以下内容：

  "vetur.validation.template": false,

,

您可以尝试将其添加到 .vscode/settings.json

{
    "vetur.validation.template": false
}

,

如果您想继续使用相同的代码，只需使用 // eslint-disable-next-line 或 eslint-disable-line 在包含插槽标记的下一行禁用 eslint 并继续执行代码

或

您可以使用 <template v-slot> 来使用未命名的插槽标记和 <template v-slot="name> 使用命名槽标签。

这里是文档 Link 的链接，

,

您正在尝试使用实际上是 deprecated 的旧语法。尝试使用 named slots syntax。

所以，我猜不是

localhost:<port>/register

你应该使用

<ion-refresher slot="fixed">...</ion-refresher>