默认规则vue/属性连字符是否与vue/prop-name-hyphenation冲突？

Question

我正在使用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的最佳实践是什么。谢谢。

Answer 1

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

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

将对应于

props: {
  recordId: {
  ...
  }
}