Vue 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>
