Vue 3 获得风格的道具

Posted 2023-02-22

【中文标题】Vue 3 获得风格的道具

【英文标题】：Vue 3 get props in style

【发布时间】：2021-11-05 05:00:23

【问题描述】：

我在样式标签中实现道具时遇到了一些问题。 我有类似的道具：

 props: 
    icon: 
      type: String,
      required: true
    ,
    label: 
      type: String,
      required: true
    
  

我想在 Style 中使用标签道具，例如：

    <style scoped lang="scss">
      .class
        color: label;
      
    </style>

这可能吗？因为它不是这样工作的

想法实际上是这样调用：

.drop-color
    color: map-get($var, label);
  

如果我将其定义为，这将起作用；

.drop-color
    color: map-get($var, 'blue');
  

我只需要传递道具标签。

【问题讨论】：

检查这个答案 - ***.com/a/42872117/10000229

【参考方案1】：

通过新的脚本设置，您可以使用 vue 3.2.x 的 v-bind 进行设置：

<script setup>
import defineProps from 'vue'

const props = defineProps(
     icon: 
      type: String,
      required: true
    ,
    label: 
      type: String,
      required: true
    
)


</script>
  <style scoped lang="scss">
      .class
        color: v-bind(label);
      
    </style>

LIVE DEMO

【讨论】：

谢谢，但想法是做一些类似颜色的事情：map-get($products, v-bind(icon));这样它就不起作用了

请分享整个组件代码和package.json文件