插槽（Slot）是Vue组件的一种机制，允许父组件向子组件插入内容。这是一种非常强大的特性，可以让开发者以一种组合而非继承的方式来构建界面。
在Vue中，插槽可以分为三种：具名插槽、作用域插槽和作用域插槽的新语法。
- 单个插槽
在子组件中，你可以使用 <slot></slot> 标签定义一个插槽。
<!-- ChildComponent.vue -->
<template>
<div>
<slot></slot>
</div>
</template>在父组件中，你可以使用 <ChildComponent> 标签插入内容。
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<p>This is some content</p>
</ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>- 具名插槽
有时候，你可能需要在一个子组件中使用多个插槽。这时，你可以给插槽设置一个名字。
<!-- ChildComponent.vue -->
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>在父组件中，你可以使用 <template v-slot:header> 来指定插入到 header 插槽的内容。
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<template v-slot:header>
<p>This is the header content</p>
</template>
<p>This is the default content</p>
<template v-slot:footer>
<p>This is the footer content</p>
</template>
</ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>- 作用域插槽
有时候，你可能希望在插槽内容中使用子组件的数据。这时，你可以使用作用域插槽。
<!-- ChildComponent.vue -->
<template>
<div>
<slot :data="childData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
childData: 'This is some data from the child component'
}
}
}
</script>在父组件中，你可以使用 <template v-slot:default="slotProps"> 来接收子组件传递给插槽的数据。
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<template v-slot:default="slotProps">
<p>{{ slotProps.data }}</p>
</template>
</ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>- 新的作用域插槽语法
Vue 2.5+ 引入了一个新的语法，可以让代码更加简洁。
<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<template v-slot:default="slotProps">
<p>{{ slotProps.data }}</p>
</template>
</ChildCom