vue2封装组件使用插槽

当我们封装一个 Vue 组件时，可以使用插槽（slot）来让组件的使用者可以在组件内部插入内容。使用插槽可以让我们的组件更加灵活和可复用。

在组件内部，我们可以使用 `slot` 标签来声明一个插槽。例如：

<template>
  <div class="my-component">
    <h2>这是组件的标题</h2>
    <slot></slot>
  </div>
</template>

上面的代码中，我们在组件的模板中使用了 `slot` 标签，这个标签表示这个组件需要一个插槽。使用这个组件的时候，我们可以在组件标签内部插入任意的内容，这些内容会被插入到 `slot` 标签的位置上。

例如，我们可以这样使用这个组件：

<template>
  <div>
    <MyComponent>
      <p>这里是插入到组件中的内容</p>
    </MyComponent>
  </div>
</template>

这样，`<p>这里是插入到组件中的内容</p>` 就会被插入到组件的模板中的 `slot` 标签的位置上。

如果我们需要多个插槽，可以给 `slot` 标签添加一个 `name` 属性来区分不同的插槽。例如：

<template>
  <div class="my-component">
    <h2>这是组件的标题</h2>
    <slot name="header"></slot>
    <div class="content">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

上面的代码中，我们声明了三个插槽，分别是名为 `header`、`default` 和 `footer` 的插槽。使用这个组件时，我们可以这样插入内容：

<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h3>这是头部插槽的内容</h3>
      </template>
      <p>这里是默认插槽的内容</p>
      <template v-slot:footer>
        <p>这是底部插槽的内容</p>
      </template>
    </MyComponent>
  </div>
</template>

上面的代码中，我们使用了带 `v-slot` 的 `<template>` 标签来指定要插入哪个插槽，例如 `v-slot:header` 表示要插入到名为 `header` 的插槽中。在 `<template>` 标签内部，我们可以插入任意的内容，这些内容会被插入到对应的插槽位置上。