先记住这个答案
组件脚本通常用 camelCase 声明多词 prop，模板调用约定使用 kebab-case，Vue 会处理对应关系。在单文件组件模板中通常也能使用 camelCase，但直接写在 HTML 中、先由浏览器解析的 DOM 模板会受到属性名大小写不敏感的限制，所以应使用 kebab-case。已声明 prop 的规范化与 attrs 的原始键名访问又是两件事，读取 attrs 时不能假定所有连字符名称都自动变成驼峰。
- 脚本声明常用驼峰，模板调用推荐短横线命名
- 浏览器先解析的 DOM 模板可能把属性名转成小写
- props 对应规则不等于 attrs 所有键名都会自动规范化
驼峰声明与短横线调用怎样配合
例如脚本声明 pageSize，模板可以用 page-size 传入，组件内部仍按 props.pageSize 读取。这个约定既符合 JavaScript 属性命名习惯，也与 HTML attribute 风格协调。不能因为模板用了连字符，就在脚本中盲目改成另一份毫无关联的业务字段。
单文件组件由 Vue 编译模板，可以保留比浏览器直接解析 HTML 更多的命名信息，通常允许相应的驼峰调用。推荐短横线主要是统一习惯与兼容模板来源，不应错误宣称所有 SFC 中的驼峰 prop 都无效。
为什么 DOM 模板容易丢失大写信息
如果模板先作为普通 HTML 放进页面，浏览器解析 attribute 时会按 HTML 规则处理名称，pageSize 可能已经成为 pagesize。Vue 接手时无法凭空恢复原来的单词边界，因此它不一定能对应声明的 pageSize。写成 page-size 可以保留分词信息。
排查时应查看实际 DOM 中的 attribute 名，而不仅是源文件文本。构建工具编译的 SFC、运行时编译的模板字符串和已经被浏览器解析的 DOM，不应直接视为同一个入口。组件库文档给出统一短横线调用示例，可以减少使用者在不同环境间迁移时遇到的问题。
命名正确还要检查值与输入归类
page-size="20" 传入静态字符串，使用绑定表达式才可以传入数字结果；字段名能正确匹配不代表类型已经正确。若组件没有声明对应 prop，该输入可能进入 attrs，脚本读取时需要注意原始键名，例如 attrs["page-size"]，不能照搬 props.pageSize 的访问方式。
批量重命名组件接口时，应同时检查脚本声明、模板调用、渲染函数对象和测试数据。还要确认名字是否与已有参数重复或被包装层消费。只对某种拼写做字符串替换，可能漏掉另一种合法写法，也可能误改原生 data 或 ARIA 属性。
容易答错的地方
- 所有模板中的驼峰 prop 都会被强制转小写
- 这主要涉及先经过浏览器 HTML 解析的入口，不能推广到所有 Vue 编译场景。排查“Vue props camelCase kebab-case 与 DOM 模板大小写”时还要核对输入、版本和执行顺序，并用反例确认修复后的边界。
- attrs 与 props 的键名访问规则完全一样
- attrs 保留透传属性的原始拼写，带连字符的键通常需要方括号访问。排查“Vue props camelCase kebab-case 与 DOM 模板大小写”时还要核对输入、版本和执行顺序，并用反例确认修复后的边界。
面试官还会怎么问？
数字 prop 的名字匹配了，为什么仍有类型警告？
检查传值方式，静态文字和动态表达式不同，命名规范化不负责把所有字符串转换成数字。针对“Vue props camelCase kebab-case 与 DOM 模板大小写”，还应保留最小复现、预期结果和失败路径，避免只凭一次现象下结论。
渲染函数里应怎样传多词 prop？
通常在 h 的参数对象中使用脚本侧清楚的驼峰字段，并根据组件接口核对类型与事件键名。针对“Vue props camelCase kebab-case 与 DOM 模板大小写”，还应保留最小复现、预期结果和失败路径，避免只凭一次现象下结论。
更换模板来源时怎么验证兼容性？
分别检查实际解析后的属性名、组件接收值和 attrs 归类，不能只比较源码外观。针对“Vue props camelCase kebab-case 与 DOM 模板大小写”，还应保留最小复现、预期结果和失败路径，避免只凭一次现象下结论。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。