vue/valid-v-slot

强制有效的 v-slot 指令

• ⚙️ 此规则包含在 "plugin:vue/essential"、*.configs["flat/essential"]、"plugin:vue/vue2-essential"、*.configs["flat/vue2-essential"]、"plugin:vue/strongly-recommended"、*.configs["flat/strongly-recommended"]、"plugin:vue/vue2-strongly-recommended"、*.configs["flat/vue2-strongly-recommended"]、"plugin:vue/recommended"、*.configs["flat/recommended"]、"plugin:vue/vue2-recommended" 和 *.configs["flat/vue2-recommended"] 中。

此规则检查每个 v-slot 指令是否有效。

¥This rule checks whether every v-slot directive is valid.

📖 规则详情

此规则在以下情况下报告 v-slot 指令：

¥This rule reports v-slot directives in the following cases:

• 该指令不属于自定义元素。例如<div v-slot=""></div>

  ¥The directive is not owned by a custom element. E.g. <div v-slot=""></div>

• 该指令是一个命名插槽，直接位于自定义元素上。例如<my-component v-slot:foo></my-component>

  ¥The directive is a named slot and is on a custom element directly. E.g. <my-component v-slot:foo></my-component>

• 该指令是默认插槽，直接位于自定义元素上，还有其他命名插槽。例如<my-component v-slot=""><template v-slot:foo></template></my-component>

  ¥The directive is the default slot, is on a custom element directly, and there are other named slots. E.g. <my-component v-slot=""><template v-slot:foo></template></my-component>

• 具有该指令的元素具有另一个 v-slot 指令。例如<my-component v-slot:one v-slot:two></my-component>

  ¥The element which has the directive has another v-slot directive. E.g. <my-component v-slot:one v-slot:two></my-component>

• 具有该指令的元素具有另一个 v-slot 指令，该指令分布到同一个插槽。例如<my-component><template v-slot:foo></template><template v-slot:foo></template></my-component>

  ¥The element which has the directive has another v-slot directive that is distributed to the same slot. E.g. <my-component><template v-slot:foo></template><template v-slot:foo></template></my-component>

• 该指令有一个动态参数，它使用指令定义的范围属性。例如<my-component><template v-slot:[data]="data"></template></my-component>

  ¥The directive has a dynamic argument which uses the scope properties that the directive defined. E.g. <my-component><template v-slot:[data]="data"></template></my-component>

• 该指令有任何修饰符。例如<my-component v-slot.foo></my-component>

  ¥The directive has any modifier. E.g. <my-component v-slot.foo></my-component>

• 该指令是默认插槽，直接位于自定义元素上，没有值。例如<my-component v-slot></my-component>

  ¥The directive is the default slot, is on a custom element directly, and has no value. E.g. <my-component v-slot></my-component>

Now loading...

注意

此规则不检查指令中的语法错误，因为它由 vue/no-parsing-error 规则检查。

¥This rule does not check syntax errors in directives because it's checked by vue/no-parsing-error rule.

🔧选项

¥🔧 Options

{
  "vue/valid-v-slot": ["error", {
    "allowModifiers": false
  }]
}

• allowModifiers (boolean) ...允许在 v-slot 指令的参数中使用修饰符。仍然不允许在 v-slot 之后使用修饰符。例如<template v-slot.foo> 默认 false。

  ¥allowModifiers (boolean) ... allows having modifiers in the argument of v-slot directives. Modifiers just after v-slot are still disallowed. E.g. <template v-slot.foo> default false.

allowModifiers: true

Now loading...

👫相关规则

¥👫 Related Rules

• vue/no-parsing-error

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v7.0.0 中引入

¥This rule was introduced in eslint-plugin-vue v7.0.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source