Vue.js 设置Vue插槽的样式

有没有办法在Vue组件中设置插槽的样式

<slot style="position: absolute"></slot>

及

不工作。

将插槽包装在

中，并设置

的样式：

<div style="...">
  <slot></slot>
</div>

---

您可以从父级传递一个类，如下所示：

在组件模板中：

<slot name="quoteText"></slot>

当传递到插槽时：

<p slot="quoteText" class="mb-md-100">Text</p>

文本

---

我找到了这样一条出路

    computed: {
        isAppBoxSlotActive() {
            return Boolean(this.$slots['app-box']);
        }
    },

    <div v-if="isAppBoxActive"
         :class="$style['app-box']">
        <slot name="app-box">...</slot>
    </div>

计算：{
isAppBoxSlotActive（）{
返回布尔值（这是.$slots['app-box']）；
}
},
...

谢谢您的回答。但是，如果将多个元素传递到插槽中，该解决方案将不起作用。

.wrapper>*

将针对每个插槽元素。如果只需要针对特定的插槽元素，可以使用

.wrapper>*：n子元素（2）

或

.wrapper>.child

。你具体想做什么？您希望能够绑定每个slot元素的动态

样式

，还是使用外部CSS就足够了？使用div或其他元素包装可以而且经常会中断内容流。。。。你突然有了一个不应该出现的随机变量，它可能没有必要的样式来表现得像插槽中的内容。不幸的是，

display:contents

没有得到很好的支持。

<slot name="quoteText"></slot>

<p slot="quoteText" class="mb-md-100">Text</p>

    computed: {
        isAppBoxSlotActive() {
            return Boolean(this.$slots['app-box']);
        }
    },

    <div v-if="isAppBoxActive"
         :class="$style['app-box']">
        <slot name="app-box">...</slot>
    </div>