vuejs 将类传递给组件答案

【问题标题】：vuejs passing class to componentvuejs 将类传递给组件
【发布时间】：2020-06-11 09:05:34
【问题描述】：

<template>
    <div>
        <!-- desktop-->
        <svg v-if="name === 'desktop'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
            <path
                d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z"
            />
        </svg>
        <svg v-if="name === 'draggable-handle'" width="11" height="16" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
            <circle cx="2.22798" cy="1.45455" r="1.45455" />
            <circle cx="8.77486" cy="1.45455" r="1.45455" />
            <circle cx="2.22798" cy="14.5454" r="1.45455" />
            <circle cx="8.77486" cy="14.5454" r="1.45455" />
            <circle cx="2.22798" cy="8.00044" r="1.45455" />
            <circle cx="8.77486" cy="8.00044" r="1.45455" />
        </svg>

大家好，基本上我有一个名为 SIcon.vue 的组件，它有一堆 svg 的硬编码和不同的名称属性，所以我可以使用不同的。我目前正在尝试做的是将一个类字符串传递回我的组件。例如这里，如果我这样做

<SIcon name="desktop" class="h-10 w-10" />

桌面的 svg 应该使用“h-10 w-10”类进行渲染。我需要这个，因为我使用的是 tailwindcss，我必须准确地传回字符串。我尝试了 v-bind 并添加了一个类道具，但它仍然需要一个属性。任何帮助将不胜感激

【问题讨论】：

有很多方法可以做到这一点，但您需要展示更多关于您迄今为止尝试过的内容。例如，常规方法是将 SVG 结构附加到 HTML 并调用 <use> 指定 SVG 标识符。但这可能对你不起作用。因此，如果您想要具体的回应，您需要更具体地了解您的用例。

标签： vue.js

【解决方案1】：

在 SIcon.vue 中，您可以从添加一个道具开始：

props: ['propClass'],

将 propClass 绑定到 svg 类：

<svg :class="propClass" ..>

在您的父组件中：

<SIcon name="desktop" propClass="h-10 w-10" />

这应该直接绑定到 SVG

【讨论】：

【解决方案2】：

尽管@procoib 的解决方案使用props，但您的解决方案几乎是您示例的更好方法。除了使用props，您还可以使用$attrs。 $attrs 允许您访问从父级传递给子级的任何类属性，并且只需将这些类附加到您子级中的任何节点。

您的代码可能看起来像这样。

<template>
    <div>
        <!-- desktop-->
        <svg 
            v-if="name === 'desktop'"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24" 
            width="24"
            height="24"
            v-bind="$attrs"
        >
            <path d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z" />
        </svg>
        <svg
            v-if="name === 'draggable-handle'"
            width="11" 
            height="16" 
            viewBox="0 0 11 16"
            xmlns="http://www.w3.org/2000/svg" 
            v-bind="$attrs"
        >
            <circle cx="2.22798" cy="1.45455" r="1.45455" />
            <circle cx="8.77486" cy="1.45455" r="1.45455" />
            <circle cx="2.22798" cy="14.5454" r="1.45455" />
            <circle cx="8.77486" cy="14.5454" r="1.45455" />
            <circle cx="2.22798" cy="8.00044" r="1.45455" />
            <circle cx="8.77486" cy="8.00044" r="1.45455" />
        </svg>
    </div>
</template>

【讨论】：

啊，谢谢，我想我忘了我在 svg 中也有高度和宽度，所以它在早期 x-x 中不起作用
乐于助人。但是，如果您能接受刚刚帮助您的正确答案，那就太好了。