Vue.js 使用插槽（Slots）优化组件结构
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 组件开发中必不可少的工具。通过插槽，你可以让组件更加灵活、可复用。
- 默认插槽：最简单的占位符，适合简单的内容插入。
- 命名插槽：当组件需要多个插槽时，用命名插槽管理更清晰。
- 作用域插槽：在插槽中传递数据，方便使用者自定义内容。