vue v-slot指令

v-slot 指令在 Vue 2.5+ 的版本中用于指定插槽内容。它用于将内容分发到子组件的命名插槽或作用域插槽。

基本用法：

1. 默认插槽：

<child-component>
  <template v-slot:default>
    <!-- 这里是默认插槽的内容 -->
  </template>
</child-component>

2. 具名插槽：

<child-component>
  <template v-slot:namedSlot>
    <!-- 这里是名为 namedSlot 的插槽内容 -->
  </template>
</child-component>

3. 作用域插槽：

<child-component v-slot:scopedSlot="slotProps">
  <!-- 使用 slotProps 中的数据 -->
</child-component>

简写形式：

1. 默认插槽的简写：

<child-component>
  <!-- 这里是默认插槽的内容 -->
</child-component>

2. 具名插槽的简写：

<child-component>
  <template #namedSlot>
    <!-- 这里是名为 namedSlot 的插槽内容 -->
  </template>
</child-component>

作为组件的属性简写：

<child-component #namedSlot />

请注意，Vue 2.5+ 中的 v-slot 指令只能用于 <template> 元素或者组件的根元素，在插槽内容中表明插槽的“出口”。在 Vue 3.0 中，v-slot 被重构为 # 来保持向后兼容性，并引入了新的 <slot> 组件，用于更灵活地处理插槽。