Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case eq

错误描述

错因分析

在单文件组件中，，同一个变量的驼峰形式和短横线形式等价。例如一个组件的props里面有一个dataSource变量。因此我们习惯于这么做。

 <some-template :dataSource="args">...<some-template>

此时如果，写成

 <some-template :data-source="args">...<some-template>

则会报错，虽然两者等价，但是在单文件组件中，为props变量赋值，只能使用这种方式。
但是在html文件中，则反过来。因为html代码中，大小写不敏感。所以一下两种描述等价。

 <some-template :dataSource="args">...<some-template>

 <some-template :datasource="args">...<some-template>

也就是说，此时的dataSource无法对应变量中的data-source(我猜是因为dataSource被转化成datasource),因此会造成无法为变量dataSoure赋值的情况。
如果要为变量dataSource赋值，在html文件中，我们可以使用这种方法。

 <some-template :data-source="args">...<some-template>

虽然这个语法在单文件组件中会报错，但是在html文件中，则会正确赋值。