vue插槽

Vue.js 中的插槽(slot)是一种非常强大的组件通信方式。它可以让父组件向子组件传递任意的 HTML 内容，这些内容可以是 DOM 元素、文本、甚至是其他的 Vue 组件。

在 Vue.js 中，插槽有两种类型：具名插槽和默认插槽。

具名插槽可以让我们在父组件中定义不同的插槽内容，并且在子组件中通过 slot 标签的 name 属性来选择使用哪个插槽内容。

默认插槽则是当子组件没有具名插槽时，会自动使用默认插槽。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <h1 slot="header">这是标题</h1>
      <p slot="content">这是内容</p>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

在上面的示例中，父组件中的 child-component 组件包含了两个具名插槽：header 和 content。在子组件中，我们通过 slot 标签的 name 属性来选择使用哪个插槽内容。

父组件中的具名插槽内容会被插入到子组件中对应的插槽标签中，从而实现了父组件向子组件传递任意的 HTML 内容的功能。