Vuetify v-container的fill-height属性如何转换为.fill-height CSS类？

先澄清认知：Vue 本身没有「Prop 自动转 CSS 类」的内置能力 #

Vue 仅提供基础的动态类绑定能力，支持开发者手动在 v-bind:class 表达式中写判断逻辑、拼接类名，不存在任何自动将特定 prop 转换为对应命名类名的内置特性。你观察到的传fill-height prop自动加对应类的效果，完全是 Vuetify 自身组件封装逻辑实现的，和Vue核心能力无关。

Vuetify 实现该转换的完整流程 #

1. 公共 Prop 的抽离定义 #

你之前在公共变量文件中搜到的fillHeight定义，是Vuetify对跨组件通用配置的抽离：它把多组件复用的样式类对应的布尔prop，统一放到共享的prop定义模块中，所有需要支持该能力的组件（如v-container、v-main）只需要引入这份公共配置，不需要在每个组件源码中重复写prop声明。

2. 核心类名拼接逻辑（就是你没搜到的关键环节） #

Vuetify 为这套公共prop配套了对应的公共mixin，在mixin的计算属性中，专门有一段汇总组件根元素所有类名的逻辑（常见命名为rootClasses/themeClasses），核心判断逻辑和下面的伪代码完全一致：

// 公共mixin内部逻辑
computed: {
  // 最终输出到组件根元素的类集合
  componentRootClasses () {
    return [
      // ...其他通用类的拼接逻辑
      {
        // fillHeight prop为true时，自动添加fill-height类
        'fill-height': this.fillHeight,
        // 同类逻辑的其他prop示例
        'dense': this.dense,
        'rounded': this.rounded
      }
    ]
  }
}

很多开发者搜源码找不到这段逻辑，本质是漏看了公共mixin的关联——Vuetify不会在每个组件的独立文件里重复写相同的类判断逻辑，所有可复用的逻辑都会抽离到独立的mixin模块里，你之前只定位到了prop定义的位置，没有顺着组件引入的mixin关系找到对应的计算属性段，自然就断了线索。

3. 根元素的动态类绑定 #

所有引入该公共mixin的组件，都会在自身模板的根元素上，把上述计算属性输出的类集合通过:class绑定上去。当你给组件传值为true的fill-height prop时，判断逻辑触发，fill-height 字符串就会被自动加到组件渲染的DOM类名列表中。

为什么手动写class="fill-height"和传prop效果完全等价 #

这是Vuetify刻意做的适配：fill-height 类对应的全局CSS规则（也就是你观察到的height:100%）是Vuetify基础样式表中常驻的公共类，不管你是通过prop触发自动加类，还是手动直接给组件加这个类名，只要类名出现在DOM上，就会匹配到对应的样式规则，效果自然完全一致。

补充：Vuetify中绝大多数通用布尔样式prop（比如outlined、flat、maximize）都是用同一套逻辑实现的，没有任何特殊的编译层魔法，本质就是手动在动态类绑定里做了prop值到类名的判断映射。

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