vue2 v-slot

Vue 2 中的 v-slot 是用于在父组件中定义插槽内容并传递给子组件的一种方式。它的作用是允许父组件向子组件注入内容，以实现更灵活的组件复用和扩展。

在 Vue 2 中，v-slot 指令可以通过两种形式来使用：

1. 命名插槽：
在父组件中，可以使用 <template> 标签来定义具名插槽，并使用 v-slot directive 来指定插槽的名称。例如：

   <template v-slot:header>
     <h1>这是插槽的头部</h1>
   </template>

在子组件中，可以使用 <slot> 标签来接收父组件传递的内容，并将其插入到对应的位置。例如：

   <div>
     <slot name="header"></slot>
     <!-- 其他内容 -->
   </div>

2. 默认插槽：
如果父组件没有指定插槽名称，子组件将会使用默认插槽来接收内容。在父组件中，可以直接使用 <template> 标签来定义默认插槽的内容。例如：

   <template v-slot>
     <p>默认插槽的内容</p>
   </template>

在子组件中，可以使用 <slot> 标签来接收默认插槽的内容。例如：

   <div>
     <slot></slot>
     <!-- 其他内容 -->
   </div>

需要注意的是，v-slot 只能在 <template> 标签上使用，并且在同一个组件中只能有一个 <template> 标签用于定义插槽。此外，子组件中的插槽内容可以使用作用域插槽的方式进行进一步的操作和处理。