Vue DOM模板中PascalCase与kebab-case使用场景解惑

首先得理清Vue模板的两种核心编译场景，这就是你疑惑的关键：

1. 你项目里PascalCase能正常工作的场景 #

如果你用的是单文件组件(.vue) 或者通过Vue选项里的template字段写的字符串模板，这些模板会先被Vue的编译器直接处理，根本轮不到浏览器的HTML解析器插手。这种情况下：

• PascalCase（<MyComponent/>）、kebab-case（<my-component/>）都能正常识别
• 自闭合标签也完全没问题

这就是你项目里两种命名都能用的原因。

2. 文档说的「特定情况」：直接在DOM中编写模板 #

只有当你的模板内容需要先经过浏览器HTML解析器处理时，才必须严格遵循kebab-case和显式闭合标签，具体场景包括：

• 把模板写在页面原生的<template>元素内部
• 直接把模板代码写在挂载目标元素（比如<div id="app">...</div>）的innerHTML里
• 使用组件的inline-template属性时的模板内容

为什么必须用kebab-case？ #

这是浏览器HTML的固有规则决定的：

• HTML标签名在解析时会强制转为小写，你写的<MyComponent>会被浏览器自动变成<mycomponent>——没有连字符，和你注册的组件名（不管是PascalCase的MyComponent还是对应的kebab-casemy-component）都对不上，导致Vue找不到组件。
• HTML规范要求自定义元素必须包含连字符（避免和原生标签冲突），my-component这种kebab-case写法符合规范，浏览器解析后不会变形，Vue能正确映射到你注册的组件。
• 另外，原生HTML里只有少数标签支持自闭合（比如<img/>），自定义组件必须用显式闭合标签<my-component></my-component>，否则浏览器可能解析出错，导致模板结构混乱。

总结 #

简单说：

• 模板由Vue编译器先处理（SFC/字符串模板）：随便用PascalCase或kebab-case，自闭合也OK
• 模板先由浏览器HTML解析器处理（DOM内写模板）：必须用kebab-case组件名 + 显式闭合标签

内容的提问来源于stack exchange，提问作者mcool