Vue插槽的使用场景

插槽(slot)是一种用于组件模版复用的技术，它允许你在子组件中预留一些位置，然后在父组件中填充内容。这样就可以在不同的地方使用同一个组件，但是在不同的地方显示不同的内容。
插槽主要分为默认插槽、具名插槽、动态插槽、插槽后备、作用域插槽。

默认插槽

// 父组件<div><slotChild>默认传值的方式</slotChild></div>
// 子组件
<template><div><slot></slot></div>
</template>

具名插槽

父组件的第一种写法

<slotChild><template v-slot:header><div>Title</div></template><div>具名插槽的内容</div>
</slotChild>

父组件内部内容的另一种写法

<template #header><div>Title</div>
</template>
<div>具名插槽的内容</div>

子组件的文件

<div><header><slot name="header">Default Header</slot></header><div><slot>default Content</slot></div>
</div>

动态插槽

parent.vue文件

<slotChild:headerSlotName="headerSlot":mainSlotName="mainSlot"><template v-slot:[headerSlot]><div>这是一个动态的头部</div></template><template v-slot:[mainSlot]><div>这是一个动态的内容渲染区域</div></template>
</slotChild>

import { defineComponent, onMounted, ref } from 'vue'
import slotChild from '@/components/slotChild.vue'export default defineComponent({name: 'parent',components: {slotChild},setup() {return {headerSlot: 'header',mainSlot: 'content',}}
})

slotChild.vue的文件

<div><header><slot :name="headerSlotName"></slot></header><main><slot :name="mainSlotName"></slot></main>
</div>

import { defineComponent } from "vue";export default defineComponent({name: 'slotChild',props: {headerSlotName: String,mainSlotName: String},
})

插槽后备

parent.vue文件

<slotChild><template v-slot:header><div>自定义头部内容</div></template>
</slotChild>

slotChild.vue文件

<div><header><slot name="header">Default Header</slot></header><main><slot name="main">默认的主体内容</slot></main>
</div>

在父组件中，只给header传值，主体内容采用默认的值。在大多数情况下，插槽后备与作用域插槽一起使用。

作用域插槽

parent.vue文件

 <slotChild><template v-slot:default="slotProps"><div>{{slotProps.user.name}}</div></template><template v-slot:header="headerProps"><div>{{headerProps.header.title}}</div></template>
</slotChild>

slotChild.vue文件

<div><slot :user="user"></slot><slot name="header" :header="header"></slot>
</div>

import { defineComponent, reactive } from "vue";export default defineComponent({name: 'slotChild',setup() {const user = reactive({name:'summer',age: '18'})const header = reactive({title: '标题',avatar: 'img地址'})return {user,header}}
})