Vue组件传递含冒号的TailwindCSS伪类作为props时出现解析错误如何解决

你使用v-bind（属性前的:缩写）绑定classNames属性时，Vue会默认将双引号内的内容作为JavaScript表达式解析，hover:grow中的冒号不属于合法JavaScript表达式语法，因此触发解析错误。

• 方案1：传递静态类名时去掉属性前的v-bind冒号
  不需要动态计算类名的场景下，直接写静态属性即可，Vue不会对普通属性做表达式解析：

  <cartImage :images="p.images" classNames="hover:grow hover:shadow-lg" />
  

• 方案2：动态绑定时将类名用单引号包裹为字符串
  如果确实需要用v-bind绑定（比如后续要拼接动态类名变量），把类名整体作为字符串常量传入即可符合JS语法要求：

  <cartImage :images="p.images" :classNames="'hover:grow hover:shadow-lg'" />
  

子组件内部接收classNames参数后，需要将其绑定到内部对应DOM元素的class属性上，传入的Tailwind样式才会正常生效，示例：

<!-- cartImage 子组件内部 -->
<template>
  <div>
    <img :src="images[0]" :class="classNames" alt="商品图">
  </div>
</template>

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