vue/v-slot-style

强制 v-slot 指令样式

• ⚙️ 此规则包含在 "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"] 中。

• 🔧命令行 上的 --fix 选项可以自动修复此规则报告的一些问题。

  ¥🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 规则详情

此规则强制执行 v-slot 指令样式，你应该使用简写或长格式。

¥This rule enforces v-slot directive style which you should use shorthand or long form.

Now loading...

🔧选项

¥🔧 Options

{
  "vue/v-slot-style": ["error", {
    "atComponent": "shorthand" | "longform" | "v-slot",
    "default": "shorthand" | "longform" | "v-slot",
    "named": "shorthand" | "longform",
  }]
}

名称	类型	默认值	描述
atComponent	"shorthand" | "longform" | "v-slot"	"v-slot"	直接用于自定义组件的默认插槽的样式（例如 <my-component v-slot="">）。
default	"shorthand" | "longform" | "v-slot"	"shorthand"	模板封装器中的默认插槽的样式（例如 <template #default="">）。
named	"shorthand" | "longform"	"shorthand"	命名插槽的样式（例如 <template #named="">）。

每个值的含义：

¥Each value means:

• "shorthand" ...使用 # 简写。例如#default, #named, ...

  ¥"shorthand" ... use # shorthand. E.g. #default, #named, ...

• "longform" ...使用 v-slot: 指令符号。例如v-slot:default, v-slot:named, ...

  ¥"longform" ... use v-slot: directive notation. E.g. v-slot:default, v-slot:named, ...

• "v-slot" ...不使用那个参数使用 v-slot。这比 #default 简写短。

  ¥"v-slot" ... use v-slot without that argument. This is shorter than #default shorthand.

并且支持字符串选项以与类似的 vue/v-bind-style 和 vue/v-on-style 保持一致。

¥And a string option is supported to be consistent to similar vue/v-bind-style and vue/v-on-style.

• ["error", "longform"] 与 ["error", { atComponent: "longform", default: "longform", named: "longform" }] 相同。

  ¥["error", "longform"] is same as ["error", { atComponent: "longform", default: "longform", named: "longform" }].

• ["error", "shorthand"] 与 ["error", { atComponent: "shorthand", default: "shorthand", named: "shorthand" }] 相同。

  ¥["error", "shorthand"] is same as ["error", { atComponent: "shorthand", default: "shorthand", named: "shorthand" }].

"longform"

Now loading...

📚扩展阅读

¥📚 Further Reading

• 样式指南 - 指令简写

  ¥Style guide - Directive shorthands

🚀版本

¥🚀 Version

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

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

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source