vue+slot插槽

Vue中的插槽（slot）是一种用于在组件中插入内容的机制。它允许我们在组件的模板中定义一些占位符，然后在使用该组件时，可以将具体的内容插入到这些占位符中。

在Vue 2.x版本中，我们可以使用`<slot>`元素来定义插槽，并使用`<slot>`元素的`name`属性来定义具名插槽。例如：

<template>
  <div>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="header"></slot> <!-- 具名插槽 -->
    <slot name="footer"></slot> <!-- 具名插槽 -->
  </div>
</template>

然后，在使用该组件时，我们可以在组件标签中插入内容，这些内容将会替换对应的插槽。例如：

<my-component>
  <p>默认插槽的内容</p>
  <template v-slot:header>
    <h1>具名插槽header的内容</h1>
  </template>
  <template v-slot:footer>
    <p>具名插槽footer的内容</p>
  </template>
</my-component>

在Vue 3.x版本中，为了统一插槽的语法，引入了`v-slot`指令，取代了`slot`和`slot-scope`这两个在Vue 2.x中已被废弃但仍可使用的属性。使用`v-slot`指令时，可以直接在组件标签上使用，而不需要再使用`<template>`元素。例如：

<my-component>
  <template #default>
    <p>默认插槽的内容</p>
  </template>
  <template #header>
    <h1>具名插槽header的内容</h1>
  </template>
  <template #footer>
    <p>具名插槽footer的内容</p>
  </template>
</my-component>

需要注意的是，在Vue 3.x中，只能使用`v-slot`指令来定义插槽，而不能再使用`slot`和`slot-scope`属性。