vue.js - 样式 Vue 插槽

Question

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

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

和

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

不工作。

Answer 1

将插槽包裹在 <div> 中并设置 <div> 的样式相反:

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

如果您确实需要设置插槽元素的样式，您可以像这样使用 CSS 选择器:

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

.wrapper > * {
  color: red;
}