vue3自定义组件-slot 插槽

组件：Item.vue

<template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
</template>

使用

<script setup>
import Item from './Item.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
</script>

<template>

  <Item>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>头部标题内容</template>

    主题信息内容
     
  </Item>
  
  
  <Item>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>头部标题内容2</template>

    主题信息内容2
     
  </Item>
  
 <template>

代码说明：

<slot></slot> 是主题信息内容不需要任何外部标签
<slot name="icon"></slot> 对应 <template #icon><DocumentationIcon /></template> 里面可以放组件和其他内容
<slot name="heading"></slot> 对应 <template #heading>头部标题内容</template>