循环生成多个组件并且传递插槽内容

定义需要循环生成的组件数组componentList

      componentList: [
        {
          title: 'xxx',
          componentName: 'EmotionTrend',
          width: 'long'
        },
        {
          title: 'xxx',
          componentName: 'TurnoverStrength',
          width: 'long'
        },
        { title: 'xxx', componentName: 'SuperLimitUpDown' },
        { title: 'xxx', componentName: 'PlateStrength' }
      ]

组件ReplayCustomCard的内容，主要是卡片标题有共同的样式和点击事件

  <el-card
    ref="replayCard"
    class="replay-custom-card"
  >
    <div slot="header" class="clearfix" @click="handleHeader">
      <slot name="card-header" />
    </div>
    <div :style="{ height: show ? '100%' : '0' }" class="card-content">
      <slot name="card-content" />
    </div>
  </el-card>

在父组件中循环生成，并且传递solt

        <ReplayCustomCard
          v-for="item in componentList"
          :key="item.title"
          :class="{ long: item.width }"
        >
          <template v-slot:card-header>
            {{ item.title }}
          </template>
          <template v-slot:card-content>
            <component :is="item.componentName" />
          </template>
        </ReplayCustomCard>