如何在 Vue 中将许多顺风类从父级传递给子级

Question

如何将类作为道具从父级传递给子级，我有一个组件已经在许多地方使用，并且在我被告知样式它需要为大写的地方，我想让它更可重用而不是输入多个条件我想将它们作为父母的道具传递，但到目前为止我还不能。 当我这样通过时

<template>
  <div class="font-nunito-semibold">
    <div class="category">
      <underline :text="item.category.label" :tailwind="uppercase"/>
    </div>
  </div>
</template>

在组件中我像这样创建计算属性

  computed:{
    tailwindClasses() {
      if (this.tailwind) {
        return {...tailwind}
       }
     }
  }

并像这样使用它

    <span
      :class="[{
        'o-print': color === 'white',
        'tt-initial': textTransform === 'initial',
      }, 'tailwindClasses']"
      class="text"
      >{{ text }}</span
    >

<script>
export default {
  props: ["color", "text", "textTransform", "type", "widthStart0", "tailwind"],
  data() {
    return {
      isOver: false,
      widthStartNew: false,
    };
  },
  computed:{
    tailwindClasses() {
      if (this.tailwind) {
        return {...tailwind}
       }
     }
  }
};
</script>

在元素选项卡中，它不计算任何内容，但显示字符串“tailwindClasses”

Answer 1

尝试使用这样的简单方法。 将 class 作为 object 传递。

  <underline :text="item.category.label" :tailwind="{color:'white'}"/>

然后在子组件中，您可以使用如下内容：

 <span :class="{'o-print': (tailwind.color === 'white')}">
     {{ text }}
 </span>