vue3 template

template 使用情况
1. 根据某个状态渲染多个模板的  v-if v-else
2. 插槽的场景

插槽：
子组件写法：name="title"

<slot name="title" v-bind="{ row: typeItem, index: index }">
        <div class="menuItemBox">{{ typeItem.name }}</div>
</slot>

父组件调用写法：<template #title="{ row, index }">

<CompanyTypeNav :typeList="menuList" :activity="activity" url="">
     <template #title="{ row, index }">
       <div class="leftItem" @click="clickChange(row, index)">{{ row.name }} </div>
       <span
         class="startIcon"
         :class="{ active: row.isFollow }"
         @click="startHandle(row)"
       ></span>
     </template>
</CompanyTypeNav>

---

父组件

<FullWidth
    class="detailPage"
    :class="{ whiteBg: direData.length > 0 }"
    :otherBreadcrumb="otherBreadcrumb"
  >
    <template #header>
      <div class="headerDetail" :class="{ spec: (detailData?.title?.length || 0) > 20 }">
        <div class="txtBox">
          <h4>{{ detailData.title }}</h4>
          <a-popover
            placement="bottomRight"
            :destroyTooltipOnHide="true"
            trigger="hover"
            :overlayClassName="overLayClass"
          >
            <template #content>
              {{ detailData.excerpt }}
            </template>
            <p class="introduceTxt">
              <span> {{ detailData.excerpt }}</span>
            </p>
          </a-popover>
        </div>
        <div class="videoBox" @click="viewVideo" v-if="detailData?.videoPlayList?.length > 0">
          <img class="videoBg" src="/src/assets/images/knowledge/detail/videoImg.png" alt="" />
        </div>
        <div class="imgBg" v-else>
          <img :src="detailData?.cover" alt="" />
        </div>
      </div>
    </template>
    <template #content>
      <!-- 文章模块 -->
      <ContextBody
        :contentData="contentData"
        :direData="direData"
        :isThumbUp="isThumbUp"
        :isCollect="isCollect"
        @click-handle="clickHandle"
        :numData="{
          ...handledNum,
          comment: commentTotal,
        }"
        @embed-is-show="embedIsShowHandle"
        ref="contextRef"
      />
      <ThumbUpAndCollect
        @click-handle="clickHandle"
        :isThumbUp="isThumbUp"
        :isCollect="isCollect"
        :numData="{
          ...handledNum,
          comment: commentTotal > 9999 ? '1万+' : commentTotal,
        }"
        v-if="!embedIsShow"
        position="fixed"
      />
      <!-- 评论区 -->
      <Comment ref="commentsRef" :resourceType="1" :moduleType="3" />
      <Modal :modalData="modalData" v-if="modalData.show">
        <template #content>
          <div style="width: 100%; height: 500px">
            <Video :videoId="modalData.rowData.videoVid" />
          </div>
        </template>
      </Modal>
    </template>
  </FullWidth>

子组件

<template>
  <div class="FullWidthBox whiteBg" :class="'is' + [getLayoutContentMode]">
    <div class="headerContent" id="headerContent">
      <div class="header-breadcrumb">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item v-for="(route, index) in routerData" :key="route.path">
            <span v-if="!route.redirect"> {{ t(route.meta.title) }}</span>
            <a href="javascript:;" @click="handleClick(route, Number(index) + 1)" v-else>{{
              t(route.meta.title)
            }}</a>
          </a-breadcrumb-item>
          <a-breadcrumb-item
            v-for="(otherItem, otherIndex) in otherBreadcrumb.filter(
              (item) => item.title !== undefined,
            )"
            :key="otherItem.title"
          >
            <a
              href="javascript:;"
              v-if="otherItem.path"
              @click="handleClick(otherItem, otherIndex + 2)"
              >{{ otherItem.title }}</a
            >
            <span v-else>{{ otherItem.title }}</span>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <GoBack />
      </div>

      <slot name="header"></slot>
    </div>
    <div class="contentBox" id="contentBox">
      <slot name="content"></slot>
    </div>
  </div>
</template>