eslint-plugin-vue

外观

vue/v-on-handler-style ​

强制在 v-on 指令中使用处理程序的编写风格

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

📖 规则详情 ​

此规则旨在强制在 v-on 事件处理程序中使用一致的风格

vue
<!-- Method handler: -->
<button v-on:click="handler" />

<!-- Inline handler: -->
<button v-on:click="handler()" />

<!-- Inline function: -->
<button v-on:click="() => handler()" />
正在加载...

🔧 选项 ​

json
{
  "vue/v-on-handler-style": ["error",
    ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
    {
      "ignoreIncludesComment": false
    }
  ]
}
  • 第一个选项 ... 指定允许的风格的名称。默认值为 ["method", "inline-function"]。
    • ["method", "inline-function"] ... 允许使用方法绑定处理程序。例如 v-on:click="handler"。允许在无法使用方法处理程序的地方使用内联函数。例如 v-on:click="() => handler(listItem)"。
    • ["method", "inline"] ... 允许使用方法绑定处理程序。例如 v-on:click="handler"。允许在无法使用方法处理程序的地方使用内联处理程序。例如 v-on:click="handler(listItem)"。
    • "inline-function" ... 允许使用内联函数。例如 v-on:click="() => handler()"
    • "inline" ... 允许使用内联处理程序。例如 v-on:click="handler()"
  • 第二个选项
    • ignoreIncludesComment ... 如果为 true，则即使首选风格为 "method"，也不会报告包含注释的内联处理程序或内联函数。默认值为 false。

["method", "inline-function"] (默认) ​

正在加载...

["method", "inline"] ​

正在加载...

"inline-function" ​

正在加载...

"inline" ​

正在加载...

["method", "inline-function"], { "ignoreIncludesComment": true } ​

正在加载...

["method", "inline"], { "ignoreIncludesComment": true } ​

正在加载...

📚 进一步阅读 ​

🚀 版本 ​

此规则是在 eslint-plugin-vue v9.7.0 中引入的

🔍 实现 ​