插槽的指令是v-slot。
插槽用于实现内容分发,在开发组件的时候经常用到。
注意2.6.0后具名插槽和作用域插槽新的语法 v-slot取代了slot和 slot-scope这两个目前已被废弃但未被移除且仍在文档中的 attribute。
1. 匿名插槽
如果当组件只有一个地方需要插入dom,那么可以使用匿名插槽。
// parent
<template>
<div class="page">
<hello-slot>
<div>匿名插槽</div>
</hello-slot>
</div>
</template>
<script>
import HelloSlot from '@/components/HelloSlot.vue'
export default {
components: {
HelloSlot
}
}
</script>
// child
<template>
<div class="slot">
<slot></slot>
</div>
</template>
得到的dom结构如下:
2. 具名插槽
当组件中有多个位置需要插入dom,就需要给插槽提供名称来找到对应位置。
具名插槽是通过v-slot和slot添加name来实现,他们的默认name是default。
v-slot必须写在template上,如果没有被template包裹则会视为是默认插槽的内容。
v-slot的简写为#。
如:
// parent
<template>
<div class="page">
<hello-slot>
<!-- 正常写法 -->
<template v-slot:header>
<div>我是具名插槽的头</div>
</template>
<!-- 简写 -->
<template #footer>
<div>我是具名插槽的尾</div>
</template>
<!-- 默认name -->
<div>默认位置</div>
</hello-slot>
</div>
</template>
<script>
import HelloSlot from '@/components/HelloSlot.vue'
export default {
components: {
HelloSlot
}
}
</script>
// child
<template>
<div class="slot">
<!-- 头 -->
<slot name="header"></slot>
<!-- 默认位置 name="default" -->
<slot></slot>
<!-- 尾 -->
<slot name="footer"></slot>
</div>
</template>
得到的dom结构如下:
3. 作用域插槽
作用域插槽是为了让插槽能够访问子组件的数据。
// parent
<template>
<div class="page">
<hello-slot>
<template #header="slotProps">
<!-- 使用子组件的数据展示 -->
<div>{
{ slotProps.user.name }}</div>
</template>
</hello-slot>
</div>
</template>
<script>
import HelloSlot from '@/components/HelloSlot.vue'
export default {
components: {
HelloSlot
}
}
</script>
// child
<template>
<div class="slot">
<slot name="header" :user="user"></slot>
</div>
</template>
<script>
export default {
data () {
return {
user: {
name: '小明',
age: 18
}
}
}
}
</script>
4. 动态插槽名
动态指令参数也可以用在 v-slot 上,来定义动态的插槽名:
<hello-slot>
<template v-slot:[name]>
...
</template>
</hello-slot>