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

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

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

根据我们的文档，开发人员应该使用 Web 组件插槽到 position 元素： https://ionicframework.com/docs/api/range#usage

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

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

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

  "vetur.validation.template": false,

Answer 2

关于插槽的警告

vue/no-deprecated-slot-attribute警告实际上是关于Vue 模板中的slot属性，它被替换为v-slot 。 但是，由于 Ionic Web 组件使用原生slot属性，您可以放心地忽略该警告，或禁用它：

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

如果将 VS Code 与 Vetur 一起使用，请禁用 Vetur 的模板验证，它会忽略.eslintrc.js 。 Vetur 文档推荐使用 ESLint 插件来配置你自己的 ESLint 规则：

如果要配置 ESLint 规则，请执行以下操作：

• 用vetur.validation.template: false关闭 Vetur 的模板验证
• 确保你有ESLint 插件。 错误将来自 ESLint 插件，而不是 Vetur。
• yarn add -D eslint eslint-plugin-vue在你的工作区根目录
• 在.eslintrc中设置 ESLint 规则。

未使用的fixed

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

Answer 3

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

{
    "vetur.validation.template": false
}

Answer 4

您正在尝试使用确实不推荐使用的旧语法。 尝试使用命名槽语法。

所以，我想而不是

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

你应该使用

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

Answer 5

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

或者

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

这是文档链接的链接，