Vue v-slot 指令
示例
使用 v-slot 指令将 'Hello!' 消息定向到名为 'bottomSlot' 的命名插槽，位于 <slot-comp> 组件内部。
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
查看下面的更多示例。
定义和使用
v-slot 指令用于将内容定向到命名插槽。
v-slot: 的简写形式是 #。
v-slot 指令还可以用于接收来自作用域插槽的数据，这些数据通过子组件中的 v-bind 提供。
v-slot 可以用于组件或内置的 <template> 元素上。
当我们想要将内容分配给组件中的多个插槽时，v-slot 用于 <template> 元素上。
更多示例
示例 1
使用 v-slot 在 <template> 元素上将内容分配给同一个组件中的两个不同插槽。
App.vue:
<template>
<h1>App.vue</h1>
<p>The component has two slots, and the template element is used to assign content to both.</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>Component</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
示例 2
使用 v-slot 将内容定向到默认插槽。
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>
示例 3
使用 v-slot: 简写形式 #。
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>
示例 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 对象
