vue slot具名插槽封装使用

子组件封装。

<template>
  <el-row>
    <el-col v-for="(item, index) in list :key="index" :span="span">
      <template>
        <template v-if="item.slotName && item.slotName !== ''">
          <slot :name="item.slotName" :slotData="item" />
        </template>
        <template v-else
          >{{item.prop}}</template
        >
      </template>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    span: {
      type: Number || String,
      default: 24
    },
    list{
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

父组件调用，如内容不同可以用插槽

<template>
    <info :list="list"> 
        <template #exp="{slotData}">
            {{slotData}}
        </template>
      </info>
</template>
export default {
data() {
 return {
   list: [
        {
          prop:"显示数据"
        },
        {
          slotName:'exp'
        }
      ],
  }
}
}