插槽(Slot)的使用方法

插槽是Vue.js中一个强大的功能，允许你在组件中预留位置，让父组件可以插入自定义内容。以下是插槽的主要使用方法：

基本插槽

<!-- 子组件 ChildComponent.vue -->
<template><div><h2>子组件标题</h2><slot></slot>  <!-- 这里是插槽位置 --></div>
</template><!-- 父组件使用 -->
<child-component><p>这是插入到插槽中的内容</p>
</child-component>

具名插槽

<!-- 子组件 Layout.vue -->
<template><div><header><slot name="header"></slot></header><main><slot></slot>  <!-- 默认插槽 --></main><footer><slot name="footer"></slot></footer></div>
</template><!-- 父组件使用 -->
<layout><template v-slot:header><h1>这是页眉</h1></template><p>这是主内容</p><template v-slot:footer><p>这是页脚</p></template>
</layout>

作用域插槽

允许子组件向插槽传递数据：

<!-- 子组件 TodoList.vue -->
<template><ul><li v-for="(item, index) in items" :key="index"><slot :item="item" :index="index"></slot></li></ul>
</template><!-- 父组件使用 -->
<todo-list :items="todos"><template v-slot:default="slotProps"><span>{{ slotProps.index + 1 }}. {{ slotProps.item.text }}</span></template>
</todo-list>

缩写语法

• v-slot:header 可以缩写为 #header
• 默认插槽可以缩写为 #default

<layout><template #header><h1>缩写语法</h1></template><p>默认内容</p><template #footer><p>页脚内容</p></template>
</layout>

动态插槽名

<base-layout><template v-slot:[dynamicSlotName]>...</template>
</base-layout>

插槽提供了灵活的组件内容分发机制，是构建可复用组件的重要工具。