如何在 vuejs scss 文件中传递道具值答案

【问题标题】：how to pass a props value in a vuejs scss file如何在 vuejs scss 文件中传递道具值
【发布时间】：2021-09-01 02:28:42
【问题描述】：

我想在我的 scss 文件中传递 props（字符串）值

我的组件使用“警告”的 nbColor 道具，我想将此值放在我的 scss 文件中，该文件具有类 .colorNb {color: color (nbColor);} 我希望 nbColor 取值 nbColor = color: color (warning)

我的组件调用<Table :nbColor="'warning'" />

在我的组件表中<span: class = "{colorNb: nbColor}"> {{nb}} </span> 道具 nbColor: { type: String, required: false }

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuejs3

【解决方案1】：

有点不清楚您要做什么，因为您说您想将值传递到 scss 文件，但从示例来看，您似乎想要传递把它作为一个类来标记。

如果您试图将其传递给 scss 文件，这是不可能的。
该文件已编译，因此需要在编译时创建该值。但是有一些方法可以通过使用 css 变量或style 来解决这个问题。

如果您希望将变量传递给类，那么您应该能够通过这种方式实现：

<span :class="nbColor"> {{nb}} </span>

以下代码使用基于对象的赋值，它使用键作为值，将值作为布尔值来确定是否添加了值，所以如果设置了nbColor，则会给你一个<span class="colorNb"> <span class=""> 如果不是。这对于拥有像 {active:item.isActive, disabled:item.isDisabled} 这样的基于状态的类很有用。

<span :class = "{colorNb: nbColor}"> {{nb}} </span>

【讨论】：