vue slot插槽

Vue中的插槽（Slots）是一种在父组件中将子组件的内容进行分发的机制。通过插槽，我们可以在父组件中定义一些占位符，然后在子组件中填充具体的内容。

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

具名插槽允许我们在父组件中使用多个不同的插槽，并且可以根据需要进行分发和填充。我们可以使用`<slot>`元素和`name`属性来定义具名插槽。例如：

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">
      <!-- 默认插槽内容 -->
      <h1>默认标题</h1>
    </slot>
    <p>子组件内容</p>
    <slot name="footer">
      <!-- 默认插槽内容 -->
      <p>默认页脚</p>
    </slot>
  </div>
</template>

在上面的例子中，父组件定义了三个插槽：`header`、默认插槽和`footer`。子组件可以根据需要填充这些插槽，并且如果没有提供相应的内容，那么会显示插槽中的默认内容。

默认插槽是没有名字的插槽，如果在父组件中没有定义具名插槽的话，子组件的内容会被分发到默认插槽中。

除了使用`<slot>`元素和`name`属性来定义插槽，我们还可以使用`<template>`元素和`v-slot`指令来定义和填充插槽。例如：

<!-- 父组件 -->
<template>
  <div>
    <template v-slot:header>
      <!-- 插槽内容 -->
    </template>
    <!-- 默认插槽内容 -->
    <template v-slot:default>
      <!-- 插槽内容 -->
    </template>
    <template v-slot:footer>
      <!-- 插槽内容 -->
    </template>
  </div>
</template>

使用插槽可以使我们的组件更具灵活性，可以根据需要在父组件中定制子组件的部分内容。