Vue中使用驼峰命名导致的错误

发表于 | 分类于 ，
字数统计: 378 字

前端中需要注意的大小写问题

前端中HTML是不区分大小写的，在页面中使用大写字母命名的变量在被浏览器解析时，都会被解析成小写，比如解析之前的变量名为HELLO，解析之后就成为了hello，如下图所示：

而在JS中是大小写敏感的，由于在Java和Python中习惯性通过驼峰命名法来对变量进行命名，我刚开始使用Vue时也是使用这种方法。

驼峰命名导致的页面加载报错

在对子组件属性命名时，使用了驼峰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
	Vue.component("temp", {
		template: "#t1",
		props: {
			needData: { // 这里使用了驼峰命名
				type: Object,
			}
		}
	})
	
	new Vue({
		el: "#app",
		data: {
			message: "HELLO",
			info: "WORLD"
		}
	})

</script>

由于这是JS代码，所以后面Vue进行初始化时，只认needData这个名字。

在父组件中放入子组件，子组件绑定needData属性：

1
2
3
4
5
6
7
<body>

	<div id="app">
		<temp v-bind:needData="$data"></temp>
	</div>

</body>

由于这是HTML代码，所以needData被解析时，会变成needdata，导致Vue无法识别这个属性，产生报错：

根据上图的报错信息可知，undefined没有message属性，说明Vue的确无法识别needdata。在最上面的警告信息中，Vue官方建议我们将needData改为need-data，说明官方是不建议这种命名方法的。我将needData改为need-data后页面显示正常。