vue/v-on-handler-style

强制 v-on 指令中处理程序的编写样式

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

📖 规则详情

此规则旨在强制 v-on 事件处理程序中的样式一致：

¥This rule aims to enforce a consistent style in v-on event handlers:

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

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

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

Now loading...

🔧选项

¥🔧 Options

{
  "vue/v-on-handler-style": ["error",
    ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
    {
      "ignoreIncludesComment": false
    }
  ]
}

• 第一个选项...指定允许样式的名称。默认值为 ["method", "inline-function"]。

  ¥First option ... Specifies the name of an allowed style. Default is ["method", "inline-function"].

  • ["method", "inline-function"] ...允许通过方法绑定处理程序。例如 v-on:click="handler"。允许在不能使用方法处理程序的地方使用内联函数。例如 v-on:click="() => handler(listItem)"。

    ¥["method", "inline-function"] ... Allow handlers by method binding. e.g. v-on:click="handler". Allow inline functions where method handlers cannot be used. e.g. v-on:click="() => handler(listItem)".

  • ["method", "inline"] ...允许通过方法绑定处理程序。例如 v-on:click="handler"。允许在不能使用方法处理程序的地方使用内联处理程序。例如 v-on:click="handler(listItem)"。

    ¥["method", "inline"] ... Allow handlers by method binding. e.g. v-on:click="handler". Allow inline handlers where method handlers cannot be used. e.g. v-on:click="handler(listItem)".

  • "inline-function" ...允许内联函数。例如 v-on:click="() => handler()"

    ¥"inline-function" ... Allow inline functions. e.g. v-on:click="() => handler()"

  • "inline" ...允许内联处理程序。例如 v-on:click="handler()"

    ¥"inline" ... Allow inline handlers. e.g. v-on:click="handler()"

• 第二个选项

  ¥Second option

  • ignoreIncludesComment ...如果是 true，则不要报告包含注释的内联处理程序或内联函数，即使首选样式是 "method"。默认值为 false。

    ¥ignoreIncludesComment ... If true, do not report inline handlers or inline functions containing comments, even if the preferred style is "method". Default is false.

["method", "inline-function"]（默认）

¥["method", "inline-function"] (Default)

Now loading...

["method", "inline"]

Now loading...

"inline-function"

Now loading...

"inline"

Now loading...

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

Now loading...

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

Now loading...

👫相关规则

¥👫 Related Rules

• vue/v-on-style

• vue/v-on-event-hyphenation

📚扩展阅读

¥📚 Further Reading

• 指南 - 内联处理程序

  ¥Guide - Inline Handlers

• 指南 - 方法处理程序

  ¥Guide - Method Handlers

🚀版本

¥🚀 Version

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

¥This rule was introduced in eslint-plugin-vue v9.7.0

🔍代码实现

¥🔍 Implementation

• 规则源

  ¥Rule source

• 测试源

  ¥Test source