v-slot 指令

v-slot 和命名槽

如果一个组件中有多个 <slot>，但我们想控制内容应该出现在哪个 <slot> 中，我们需要命名插槽并使用 v-slot 将内容发送到正确的位置。

示例

为了能够区分插槽，我们为插槽指定了不同的名称。

SlotComp.vue:

<h3>组件</h3>
<div>
  <slot name="topSlot"></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

现在我们可以在 App.vue 中使用 v-slot 将内容定向到右侧插槽。

App.vue:

<h1>App.vue</h1>
<p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>

默认插槽

如果您的 <slot> 没有名称，则 <slot> 将是标有 v-slot:default 的组件或未标有 v-slot 的组件的默认值。

要了解其工作原理，我们只需在前面的示例中进行两个小更改:

示例

SlotComp.vue:

<h3>组件</h3>
<div>
  <slot name="topSlot"></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue:

<h1>App.vue</h1>
<p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>

正如已经提到的，我们可以使用默认值 v-slot:default 标签内容，以更加清楚地表明该内容属于默认槽。

示例

SlotComp.vue:

<h3>组件</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue:

<h1>App.vue</h1>
<p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>

v-slot in <template>

正如您所见，v-slot 指令可以用作组件标签中的属性。

v-slot 也可以用在 <template> 标签中，将大部分内容定向到某个 <slot>。

示例

App.vue:

<h1>App.vue</h1>
<p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
<slot-comp>
  <template v-slot:bottomSlot>
    <h4>到底部插槽！</h4>
    <p>这个 p 标签和上面的 h4 标签通过模板标签上使用的 v-slot 指令定向到底部插槽。</p>
  </template>
  <p>这会进入默认插槽</p>
</slot-comp>

SlotComp.vue:

<h3>组件</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

我们使用 <template> 标签将一些内容定向到某个 <slot>，因为 <template> 标签没有渲染，它只是内容的占位符。 您可以通过检查构建的页面来看到这一点:您不会在那里找到模板标签。

v-slot 简写 #

v-slot: 的简写是 #。

这意味着:

<slot-comp v-slot:topSlot>'Hello!'</slot-comp>

可以写成:

<slot-comp #topSlot>'Hello!'</slot-comp>

示例

App.vue:

<h1>App.vue</h1>
<p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
<slot-comp #topSlot>'Hello!'</slot-comp>

SlotComp.vue:

<h3>组件</h3>
<div>
  <slot name="topSlot"></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

Vue 练习

<slot-comp >
    Animals are interesting!
</slot-comp>