Vue - 将带有冒号的道具传递给组件时出现问题

Question

我想将 TailwindCSS 伪类传递给子组件。但是，我收到一条错误消息（解析错误。意外的标记：...）。

这是我的代码：

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

Answer 1

看来您只需要将静态值传递给 classNames 属性即可。所以你只需要像这样删除冒号：

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

Answer 2

当你这样做时:

:classNames="hover:grow hover:shadow-lg"

它会将 hover:grow hover:shadow-lg 视为有效的语句或变量 - 此时将失败。

如果你想传递 String 你有 2 个选项 :

或者使用静态属性

classNames="hover:grow hover:shadow-lg"

或者将输入用 2 个单引号括起来 '...' :

:classNames="'hover:grow hover:shadow-lg'"

Vue - Problem when passing props with a colon into the component