Vue中如何将多个Tailwind类名通过props从父组件传递给子组件

你的代码存在以下几处错误：

• 子组件模板中动态绑定class时，tailwindClasses被包裹了单引号，导致Vue将其识别为普通字符串而非计算属性，不会触发计算逻辑
• 计算属性tailwindClasses中展开tailwind时未加this指向，无法正确获取父组件传递的props值
• 父组件传递tailwind参数时，如果uppercase是静态类名而非父组件内的响应式变量，需要额外包裹一层引号，否则Vue会将其当作父组件的变量去查找，导致传值失败

父组件修正代码 #

<template>
  <div class="font-nunito-semibold">
    <div class="category">
      <!-- 静态类名要加引号包裹，多类名直接空格分隔即可 -->
      <underline :text="item.category.label" :tailwind="'uppercase'"/>
    </div>
  </div>
</template>

子组件模板修正代码 #

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

子组件script修正代码 #

<script>
export default {
  props: ["color", "text", "textTransform", "type", "widthStart0", "tailwind"],
  data() {
    return {
      isOver: false,
      widthStartNew: false,
    };
  },
  computed:{
    tailwindClasses() {
      // 直接返回传入的类名字符串即可，无需转对象，无传值时返回空对象不影响原有样式
      return this.tailwind || {}
     }
  }
};
</script>

内容的提问来源于stack exchange，提问作者seven