vue中props命名问题

发表于 | 分类于 | 评论数： | 阅读次数：

背景

在使用vscode+eslint-plugin-vue进行自动化代码风格修正的时候，发现插件自动把’template’部分的props的驼峰命名的变量改成了短横线（kebab-case）命名，而组件声明部分仍然为驼峰（camelCase）形式。

但实际并没有影响组件的正常运行。对这个问题查了下官网，原来是有说明的。

vue中Prop的命名

官网针对prop命名有如下说明：Prop 的大小写 (camelCase vs kebab-case)

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

给了如下的例子：

1
2
3
4
5
6
7
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

官网建议是在template部分中，我们使用短横线命名，post-title，在组件中使用postTitle是完全没有问题的。

一般情况，我们可能习惯了两边保持一致，都使用驼峰命名（即在template中也使用postTitle）。这样其实在html渲染的时候，还是会先渲染成post-title。

或者我们再js部分命名props时，也使用短横线post-title也是可以的。