ionic - `slot` 属性已弃用 - eslint-plugin-vue

Question

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

[vue/no-deprecated-slot-attribute]
`slot` attributes are deprecated. eslint-plugin-vue

我在.eslintrc.js

中安装了这两个插件

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

这在规则中：

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

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

Answer 1

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

或

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

这是 link 文档 Link,

Answer 2

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

所以，我猜不是

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

你应该使用

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

Answer 3

插槽警告

vue/no-deprecated-slot-attribute warning is really about the slot attribute in Vue templates, which were replaced with v-slot. However, since Ionic Web components use the native slot property，您可以安全地忽略警告，或禁用它：

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

如果将 VS Code 与 Vetur 一起使用，请禁用 Vetur 的模板验证，这会忽略 .eslintrc.js。 Vetur docs recommend using the ESLint Plugin 配置你自己的 ESLint 规则：

If you want to config ESLint rules, do the following:

Turn off Vetur's template validation with vetur.validation.template: false

Make sure you have the ESLint plugin. The errors will come from ESLint plugin, not Vetur.

yarn add -D eslint eslint-plugin-vue in your workspace root

Set ESLint rules in .eslintrc.

未使用`fixed`

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

Answer 4

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

{
    "vetur.validation.template": false
}

Answer 5

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

The slots Ionic Framework uses are not the same as Vue 2 slots. The slots we use are Web Component slots and are valid usage: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots.

Developers should be using the Web Component slots to position elements as per our docs: https://ionicframework.com/docs/api/range#usage

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

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

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

  "vetur.validation.template": false,

ionic - `slot` 属性已弃用 - eslint-plugin-vue

ionic - `slot` attributes are deprecated - eslint-plugin-vue

javascript

eslint

ionic-framework

vue.js

vetur

插槽警告

未使用`fixed`

ionic - `slot` 属性已弃用 - eslint-plugin-vue

ionic - `slot` attributes are deprecated - eslint-plugin-vue

javascript

eslint

ionic-framework

vue.js

vetur

插槽警告

未使用fixed

未使用`fixed`