Vue 3 获得风格的道具

Question

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

 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');
  }

我只需要传递道具标签。

Answer 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