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 组件开发中必不可少的工具。通过插槽，你可以让组件更加灵活、可复用。

1. 默认插槽：最简单的占位符，适合简单的内容插入。
2. 命名插槽：当组件需要多个插槽时，用命名插槽管理更清晰。
3. 作用域插槽：在插槽中传递数据，方便使用者自定义内容。