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

【问题标题】：How can i pass many tailwind classes from parent to child in Vue如何在 Vue 中将许多顺风类从父级传递给子级
【发布时间】：2021-12-31 15:33:23
【问题描述】：

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

<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”

【问题讨论】：

标签： javascript vue.js vuejs2 tailwind-css

【解决方案1】：

尝试使用像这样的简单方法。将类作为对象传递。

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

然后在子组件中，可以这样使用：

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

【讨论】：