默认规则 vue/attribute-hyphenation 是否与 vue/prop-name-casing 冲突？

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: {
  ...
  }
}