Vue.js 使用插槽（Slots）优化组件结构
今天我们聊聊 Vue.js 的一个超实用功能——插槽（Slots）。插槽是 Vue 组件开发中的神器，用好它，你可以让组件变得更灵活、更可复用，还能写出优雅的代码结构。
一、什么是插槽？
插槽其实就是占位符，它允许我们在使用组件时，往组件的指定位置插入内容。
你可以把插槽想象成“一个盒子”，组件开发者提供了盒子，而使用组件的人可以往盒子里放任何东西。是不是很有趣？
一个简单的例子
假设我们有一个组件叫 MyButton，需要在按钮内部显示一些文字：
<template>
<button class="my-button">
<slot>默认按钮</slot>
</button>
</template>
上面这个 slot 就是插槽。如果你不传内容，它会显示默认值“默认按钮”。如果你传了内容，插槽会替换默认内容：
<MyButton>提交</MyButton>
最终渲染出来的是：
<button class="my-button">提交</button>
这样是不是比写死文本灵活多了？
二、命名插槽
有时候，一个组件里可能需要多个插槽，比如对话框的标题和正文部分。如果都用默认插槽，代码可能会乱套。所以 Vue 提供了命名插槽。
定义一个对话框组件
<template>
<div class="dialog">
<header>
<slot name="header">默认标题</slot>
</header>
<main>
<slot>默认内容</slot>
</main>
<footer>
<slot name="footer">默认底部</slot>
</footer>
</div>
</template>
使用组件时传递内容
<MyDialog>
<template #header>
<h1>自定义标题</h1>
</template>
<p>这是正文内容</p>
<template #footer>
<button>确认</button>
<button>取消</button>
</template>
</MyDialog>
渲染结果
<div class="dialog">
<header>
<h1>自定义标题</h1>
</header>
<main>
<p>这是正文内容</p>
</main>
<footer>
<button>确认</button>
<button>取消</button>
</footer>
</div>
小结
用 slot 的 name 属性定义插槽。在使用组件时，用 #插槽名 或 v-slot:插槽名 指定内容插入到哪个插槽。
三、作用域插槽
有时候，组件内部会生成一些数据，使用组件的人可能需要用到这些数据。这种情况下，可以用作用域插槽。
一个例子：列表渲染
假设我们有一个 ItemList 组件，它渲染了一组数据：
<template>
<ul>
<slot
v-for="(item, index) in items"
:item="item"
:index="index"
:key="index"
>
<li>{{ item }}</li>
</slot>
</ul>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
}
}
};
</script>
组件内部用 v-for 循环渲染每个数据项，并通过 :item 和 :index 将这些数据传递给作用域插槽。
使用组件时自定义内容
使用者可以通过作用域插槽自定义每个列表项的显示格式：
<ItemList :items="['苹果', '香蕉', '橙子']">
<template #default="{ item, index }">
<li>
{{ index + 1 }} - {{ item }} 🍎
</li>
</template>
</ItemList>
渲染结果
假设传入的数据是 ['苹果', '香蕉', '橙子']，最终页面显示：
<ul>
<li>1 - 苹果 🍎</li>
<li>2 - 香蕉 🍎</li>
<li>3 - 橙子 🍎</li>
</ul>
作用域插槽的优势
作用域插槽可以让组件开发者只关注数据逻辑，而把显示逻辑交给使用者，这样既能提升灵活性，也能减少组件内部的定制代码。
四、总结
插槽（Slots）是 Vue 组件开发中必不可少的工具。通过插槽，你可以让组件更加灵活、可复用。
- 默认插槽：最简单的占位符，适合简单的内容插入。
- 命名插槽：当组件需要多个插槽时，用命名插槽管理更清晰。
- 作用域插槽：在插槽中传递数据，方便使用者自定义内容。