vue-slot插槽用法

偶尔用到slot时，都不记得是怎么用了，所以专门做一下记录

子组件：ReportCell.vue

<slot name='report'></slot>

<template>
  <div class="report-analysis-cell">
    <van-cell-group>
      <van-cell :title="title" value="更多" :to="to">
        <template #right-icon>
          <van-icon name="arrow" style="line-height: inherit;margin-left: 8px;" color="#AAAAAA" size="14px" />
        </template>
      </van-cell>
      <slot name='report'></slot>
    </van-cell-group>
  </div>
</template>
<script>
  export default {
    name:"ReportCell",
    components: {
    },
    props:['title','to']
  }
</script>

父组件：index.vue

<div v-slot:report></div>

<ReportCell title="客户情况" to="/memberCenter">
    <div v-slot:report class="report-num-box">
      <ReportNum des="客户总数" :num="data.externalSum"></ReportNum>
      <ReportNum des="新增客户" :num="data.concatCntSum | fnNum" :status="data.concatCntSum | fnNumStatus" ></ReportNum>
      <ReportNum des="聊天次数" :num="data.chatCntSum"></ReportNum>
    </div>
</ReportCell>

后续用法持续更新～

• Vue 插槽(slot)使用(通俗易懂)