Vue 3 开发中如何在style标签内使用组件props参数？

SCSS是预编译语言，会在项目构建阶段就编译为原生CSS，不存在运行时动态计算的能力；而组件props是运行时的动态参数，二者所属执行阶段完全隔离，因此你直接在map-get中传入props的label变量无法生效。

Vue3提供了运行时动态绑定style值的能力，你可以通过以下两种方案实现需求：

方案1：使用Vue3原生style v-bind特性（推荐） #

这是官方原生支持的用法，代码逻辑更内聚，步骤如下：

1. 同步SCSS色值映射到JS侧
   你可以二选一：
   • 直接在组件JS中定义和SCSS的$var完全一致的色值映射对象
   • 不想维护两份映射的话，在SCSS变量文件中添加导出语句，将map暴露给JS使用：

     // 你的原有色值映射
     $var: (
       'blue': #1890ff,
       'red': #f5222d,
       'green': #52c41a
     );
     // 新增导出逻辑
     :export {
       @each $key, $value in $var {
         #{$key}: $value;
       }
     }
     

2. 在组件中导入SCSS变量，计算对应色值

   import scssVars from '@/styles/你的变量文件路径.scss'
   
   const props = defineProps({
     icon: { type: String, required: true },
     label: { type: String, required: true }
   })
   // 计算label对应的色值
   const dropColor = computed(() => scssVars[props.label])
   

3. 在style中直接绑定计算属性

   <style scoped lang="scss">
   .drop-color{
     color: v-bind(dropColor);
   }
   </style>
   

方案2：通过CSS变量传递 #

你也可以用内联样式传递CSS变量，再在SCSS中调用：

1. 在组件根元素上绑定动态CSS变量

   <template>
     <div :style="{'--drop-color': scssVars[label]}">
       <!-- 组件内容 -->
       <span class="drop-color">示例文本</span>
     </div>
   </template>
   

2. 在SCSS中使用该CSS变量

   .drop-color{
     color: var(--drop-color);
   }
   

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