Vue v-slot 指令
示例
使用 v-slot 指令来定向 'Hello!' 消息发送至 <slot-comp> 组件内的命名槽 'bottomSlot'。
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
请参阅下面的更多示例。
定义和用法
v-slot 指令用于将内容定向到指定插槽。
v-slot: 的简写是 #。
v-slot 指令还可用于从作用域槽接收数据，这是通过在子组件中使用 v-bind 提供的。
v-slot 可以在组件上使用，也可以在内置的 <template> 元素上使用。
当我们想要将内容分配给组件中的多个插槽时，v-slot 用于 <template> 元素。
更多示例
示例 1
在 <template> 元素上使用 v-slot 将内容分配给同一组件中的两个不同插槽。
App.vue:
<template>
<h1>App.vue</h1>
<p>该组件有两个槽，模板元素用于向两个槽分配内容。</p>
<slot-comp>
<template v-slot:topSlot>
<div>
<p>Tigers are beautiful!</p>
<img src="tiger.svg" alt="tiger" width="100">
</div>
</template>
<template v-slot:bottomSlot>
<div>
<p>Whales can be very big</p>
</div>
</template>
</slot-comp>
</template>
SlotComp.vue:
<template>
<hr>
<h3>组件</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
示例 2
使用v-slot 将内容定向到默认插槽。
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>
示例 3
使用v-slot:简写#。
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>
示例 4
使用 v-slot 从作用域插槽接收数据。
App.vue:
<slot-comp v-slot:"dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
相关页面
Vue 教程:Vue 插槽
Vue 教程:作用域插槽
Vue 教程:Vue 组件
Vue 教程:Vue v-slot
Vue 参考:Vue <slot> 元素
Vue 参考:Vue $slots 对象
