prop-name-casing 冲突？

【问题标题】：Is the default rule vue/attribute-hyphenation in conflict with vue/prop-name-casing?默认规则 vue/attribute-hyphenation 是否与 vue/prop-name-casing 冲突？
【发布时间】：2021-10-09 13:17:47
【问题描述】：

我正在使用 eslint-plugin-vue 进行项目，并且我有子组件和父组件。子组件需要将值传递给父组件。

// parent
export default {
  name: 'recordDetail',
  props: {
     'record-id': { // however this will violate vue/prop-name-casing
        type: Number
     }
  }
}

<!-- child -->
<recordDetail
  :record-id="123"> <!-- it will violate vue/attribute-hyphenation if this is recordId="123" -->
</recordDetail>

请给我一些建议，告诉我你将如何处理这个问题，以及 Vue 的最佳实践是什么。谢谢。

【问题讨论】：

标签： javascript vue.js vuejs2 eslint eslint-plugin-vue

【解决方案1】：

您可以简单地在模板中使用kebab-case，在JS 端使用camelCase。

<recordDetail :record-id="123" />

将对应

props: {
  recordId: {
  ...
  }
}

【讨论】：

我还要补充一点，根据一般规则，它应该是<record-detail/>
@MichałSadowski 好点，我错过了标签中的组件名称 - 但实际上我认为最好的做法是在 SFC 和字符串模板中将 PascalCase 用于组件标签，但使用 kebab-case 时DOM 作为模板，如果我没记错的话？
您确实是对的，还检查了我一直在考虑 nuxt 组件的指南。这一切都令人困惑。
实际上，using kebab-case everywhere is also acceptable，根据文档，所以使用 kebab-case 总是更安全。