vue 具名插槽

<template>
  <div>
    <!-- 定义一个包含具名插槽的组件 -->
    <slot-component>
      <!-- 默认插槽内容 -->
      <template v-slot:default>
        <p>这是默认插槽的内容。</p>
      </template>

      <!-- 具名插槽 content 插槽 -->
      <template v-slot:content>
        <p>这是具名插槽 "content" 的内容。</p>
      </template>

      <!-- 具名插槽 footer 插槽 -->
      <template v-slot:footer>
        <p>这是具名插槽 "footer" 的内容。</p>
      </template>
    </slot-component>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- slot-component.vue -->
<template>
  <div class="slot-component">
    <!-- 默认插槽 -->
    <slot></slot>

    <!-- 具名插槽 content -->
    <div class="content-slot">
      <slot name="content"></slot>
    </div>

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

<script>
export default {
  name: 'SlotComponent'
}
</script>

解释说明：

1. slot-component.vue：定义了一个包含具名插槽的组件。

   • 使用 <slot> 标签定义默认插槽。
   • 使用 <slot name="content"> 和 <slot name="footer"> 分别定义了名为 content 和 footer 的具名插槽。

2. App.vue：使用 slot-component 组件，并通过 v-slot 指令为不同的插槽提供内容。

   • v-slot:default 用于提供默认插槽的内容。
   • v-slot:content 和 v-slot:footer 分别用于提供具名插槽 content 和 footer 的内容。