Vue 2.6连字符属性命名的作用、原理及props传递异常答疑

安全阿岳

2026-8-8

问题原因分析

这是Vue 2模板语法与HTML特性的机制差异导致的：

静态属性（不带冒号）：HTML本身大小写不敏感，当你在父组件模板里写cssClass="cssClassName"时，浏览器会自动把属性名转成全小写的cssclass，但子组件的prop是驼峰命名的cssClass，两者无法匹配，所以子组件接收不到值。
动态绑定属性（带冒号）：:videoSource="selectedAsset.videoSource"属于Vue的模板语法，并非原生HTML属性，Vue会直接识别驼峰命名，不会被浏览器转成小写，因此能正确匹配子组件的videoSourceprop，传值自然正常。

实现属性与props命名统一的方案

有两种常用方式：

方案1：静态值用短横线命名属性
保持子组件prop的驼峰命名，在父组件模板里用短横线形式传递静态值，Vue会自动把css-class映射到cssClassprop：
```
<VideoComponent
  v-if="selectedAsset.type == 'video'"
  css-class="cssClassName"
  :videoSource="selectedAsset.videoSource"
/>
```
方案2：静态值也用动态绑定
如果想在模板里统一用驼峰名，给静态值加上冒号，用字符串字面量传递，这样Vue会直接处理驼峰属性名：
```
<VideoComponent
  v-if="selectedAsset.type == 'video'"
  :cssClass="'cssClassName'"
  :videoSource="selectedAsset.videoSource"
/>
```