【Vue】组件二次封装小技巧 — 利用$slots接收插槽

在Vue.js中使用插槽（slots）时，有时候可能想要遍历插槽名并以动态的方式渲染它们。本篇文章将介绍如何通过v-for和$slots来实现这一目标，从而更灵活地处理插槽内容。

了解插槽（Slots）

在Vue.js中，插槽是一种非常有用的机制，它允许你在父组件中向子组件传递内容，并在子组件中以插槽的方式渲染这些内容。插槽是一种强大的工具，可以使你的组件更加通用和可配置。

动态渲染插槽名

有时，你可能希望以动态的方式渲染插槽名。这对于根据不同条件来选择性地呈现插槽非常有用。下面是如何使用v-for和Object.keys来实现这一目标的示例：

<template>
  <el-date-picker>
    <template v-for="slotName in Object.keys($slots)" #[slotName]>
      <slot :name="slotName">slot>
    template>
  el-date-picker>
template>

在这个示例中，我们创建了一个自定义组件，其中包含一个v-for循环，遍历$slots对象的属性名。Object.keys($slots) 返回了插槽的名称数组。然后，我们使用:name属性将每个插槽名传递给元素，从而渲染了具有动态插槽名的插槽内容。

在父组件中使用动态插槽名

在父组件中，我们使用