Vue插槽的样式设计

Question

有没有办法为Vue组件中的插槽添加样式？

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

并且

<slot class="slot"></slot>

不能工作。

- AryanJ-NYC

Answer 1

将插槽包裹在一个<div> 中，并对 <div> 进行样式设置：

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

如果你确实需要对插槽元素进行样式设置，可以使用如下的CSS选择器：

<div class="wrapper">
  <slot></slot>
</div>

.wrapper > * {
  color: red;
}

- Decade Moon

---

谢谢你的回答。然而，如果将多个元素传递到插槽中，该解决方案将无法使用。 - AryanJ-NYC

.wrapper > *将会选中每个插槽元素。如果你只想选中特定的插槽元素，可以使用.wrapper > *:nth-child(2)或者.wrapper > .child。你具体想要做什么？你想能够绑定每个插槽元素的动态样式，还是使用外部CSS就足够了？ - Decade Moon

用一个div或其他元素包裹内容时，往往会破坏内容流程...你会突然发现有一个不该出现的随机<div>，而且它可能没有必要的样式来像插槽内容一样运作。不幸的是，display: contents支持不太好。 - Douglas Gaskell

你可以使用:deep(selector)来覆盖作用域样式，但我不知道是否推荐。 - devordem

Answer 2

您可以使用 :slotted选择器：

:slotted(.classInsideSlot) { 
  color: red;
}

- Pois.Nada

Answer 3

你可以这样将父级的类传递给子组件：

在组件模板中：

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

当传递到插槽时：

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

- Roy Barber

---

slot 属性在 Vue3 中已被弃用。 - Hasan Parasteh

Answer 4

我找到了这样一种解决方案。

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

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

- Ilya Degtyarenko

---

$slots['app-box'] 对我来说不起作用，我不得不在Vue 3中更改为$slots.appBox。 - Kick Buttowski