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

【问题标题】：ionic - `slot` attributes are deprecated - eslint-plugin-vueionic - `slot` 属性已被弃用 - eslint-plugin-vue
【发布时间】：2021-04-30 22:58:18
【问题描述】：

我在 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',

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

【问题讨论】：

你想用那个<ion-refresher> 组件/元素做什么？是否要将其注入其父组件（<ion-content>）的现有插槽（名为“固定”）中？（这似乎是您现在的意图。）或者您想创建一个名为“fixed”的新插槽作为<ion-refresher> 元素的子元素，以便您在此处创建的组件的消费者能够将自定义 HTML 注入到 <ion-refresher> 的内容中？
@BartHofland 我不知道 slot="fixed" 到底做了什么。我是ionic 和vue 的新手。我在离子文档ionicframework.com/docs/api/refresher 中发现您必须在代码中添加该属性，否则ion-refresher 无法正常工作。我认为我与设计有关，而不是在代码中注入任何东西
我明白了...我查看了您链接中的信息。 Ionic 的<ion-content> 元素似乎确实有一个名为“fixed”的插槽，因此将<ion-refresher> 元素注入其中应该是完全有效的。但由于 slot 属性现在在 Vue 中已过时，我倾向于同意 tony19 用新的 Vue 语法 v-slot:fixed 替换过时的语法 slot="fixed" 的答案。似乎 tony19 最近对他的答案进行了一些修改。也许它现在对你有用。

标签： javascript vue.js ionic-framework eslint vetur

【解决方案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 组件槽来根据我们的文档定位元素：https://ionicframework.com/docs/api/range#usage

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

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

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

  "vetur.validation.template": false,

【讨论】：

这东西的目的是什么："vetur.validation.template": false,？是否会禁用 vue 验证器？
vuejs.github.io/vetur/guide/linting-error.html#error-checking 它将依赖 eslint 进行检查。
 VSCode 工具栏选择代码 -> 首选项 -> 设置 + 搜索“模板”取消选中 Vetur > 验证 -> 模板

【解决方案2】：

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

{
    "vetur.validation.template": false
}

【讨论】：

这段代码的目的是什么。你能解释一下吗！

【解决方案3】：

关于插槽的警告

vue/no-deprecated-slot-attribute 警告实际上是关于 slot attribute in Vue templates，它被替换为 v-slot。但是，由于 Ionic Web 组件使用本机 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 规则：

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

使用vetur.validation.template: false 关闭 Vetur 的模板验证

确保您拥有ESLint plugin。错误将来自 ESLint 插件，而不是 Vetur。

yarn add -D eslint eslint-plugin-vue 在您的工作区根目录中

在.eslintrc中设置ESLint规则。

未使用`fixed`

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

【讨论】：

【解决方案4】：

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

所以，我猜不是

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

你应该使用

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

【讨论】：

在控制台显示这个错误：Make sure you use: <ion-refresher slot="fixed">

【解决方案5】：

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

或

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

这里是文档Link的链接，

【讨论】：

如果使用第二种解决方案，它会显示'fixed' is defined but never used.
'Fixed' 必须是 vue 组件方法中使用的一些参数，但您从未在方法内部使用过。
我正在使用插槽来设计页面。 ionicframework.com/docs/api/refresher
此问题与 es-lint 格式化程序有关，我认为只需禁用此页面上的 es-lint 即可继续使用现有代码或更新 es-lint 配置文件使用链接配置 es- .eslint.js 文件中的 lint 规则 eslint.org/docs/user-guide/…

关于插槽的警告

未使用fixed

未使用`fixed`