样式 Vue 插槽

Question

有什么方法可以在 Vue 组件中设置插槽样式吗？

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

和

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

不工作。

原文由 AryanJ-NYC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将插槽包装在 <div> 中，并将 <div> 改为样式：

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

如果你真的需要给 slot 元素设置样式，你可以像这样使用 CSS 选择器：

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

 .wrapper > * {
  color: red;
}

原文由 Decade Moon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以像这样从父级传递一个类：

在组件模板中：

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

当传递到插槽时：

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

原文由 Roy Barber 发布，翻译遵循 CC BY-SA 4.0 许可协议