Vue v-slot
我们需要 **v-slot** 指令来引用 **具名插槽**。
**具名插槽** 允许我们更好地控制内容在子组件模板中的放置位置。
**具名插槽** 可用于创建更灵活和可重用的组件。
在使用 v-slot 和具名插槽之前，让我们看看如果我们在组件中使用两个插槽会发生什么。
例子
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
在一个组件中使用两个插槽，我们可以看到内容简单地出现在两个地方。
v-slot 和具名插槽
如果我们在一个组件中有多个 <slot>，但我们想控制内容应该出现在哪个 <slot> 中，我们需要给插槽命名并使用 v-slot 将内容发送到正确的位置。
例子
为了能够区分这些插槽，我们给它们不同的名称。
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
现在我们可以使用 v-slot 在 App.vue 中将内容定向到正确的插槽。
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
默认插槽
如果你有一个没有名称的 <slot>，那么这个 <slot> 将是标记为 v-slot:default 的组件的默认值，或者没有标记为 v-slot 的组件。
要查看它是如何工作的，我们只需要对上一个示例进行两个小更改。
例子
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
如前所述，我们可以使用默认值 v-slot:default 标记内容，以更清楚地表明内容属于默认插槽。
例子
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>
v-slot 在 <template> 中
正如你所见，v-slot 指令可以作为组件标签中的属性使用。
v-slot 也可以在 <template> 标签中使用，将更大的内容部分定向到某个 <slot>。
例子
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
SlotComp.vue:
<h3>Component</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>The component has two div tags with one slot in each.</p>
<slot-comp #topSlot>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
