vue3 插槽使用

vue3 遗弃了 slot-scoped 的方式
vue3方式
具名插槽
  <template>
  <div class="content">
    <slot name="label"></slot>
  </div>
</template>
//这是插槽的组件
<SlotComponent>
现在插槽必须使用 template 渲染  v-slot 这里必须这么写
 <template v-slot:label>
  <div v-for="(item,index) in attrs" :key="index">
     {{ item.name }}
  </div>
</template>
</SlotComponent>
// 匿名插槽
<template>
  <div class="content">
    <slot></slot>
  </div>
</template>
 <SlotComponent>
   <div v-for="(item,index) in attrs" :key="index">
       {{ item.name }}
   </div>
</SlotComponent>
// 当然这里面都可以设置默认值
 <template>
  <div class="content">
    <slot>1233</slot>
    <slot name='label'>456</slot>
  </div>
</template>

// 当前v-slot 这种方式很常用所以简写方式
	#left ==> 代替 v-slot:left
   <template #left>
        <div class="header-left" @click="hiddenCommon"></div>
   </template>

插槽内部返回外界需要得值主要是实现一个表格，这个表格外界可以使用插槽来修改具体显示得内容
参考ant-design-vue表格的数据格式

 插槽内部返回对应循环列表的值
  这是表格组件，slot的地方，是你需要使用插槽的地方
  <table class="table-index">
    <thead class="table-header">
        <tr>
          <th v-for="item in fireColumns" :key="item.key">{{ item.title }}</th>
        </tr>
    </thead>
    <tbody class="table-body">
    <tr v-for="(item,index) in fireSource" :key="item.key" class="table-body-tr">
      <td v-for="current in fireColumns" :key="current.key" class="table-body-td">
        <span v-if="!current.scopedSlots">{{ item[current.dataIndex] }}</span>
        <span v-else-if="current.scopedSlots">
        	这里的意思是如果外界传递对象中包含scopedSlot，就拿到对应对象键对应得值
        	比如说：
        	 {
        	     pointName: '点位1',
		    	scopedSlots:{customRender: 'pointName'}
 		 	}
 		 	这里就形成了具名插槽，然后返回当前行中对应得值
          <slot :name="current.scopedSlots.customRender" :current="fireSource[index]"></slot>
        </span>
      </td>
    </tr>
    </tbody>
  </table>
 外界获取插槽返回来的值
 <safe-index-table :fireColumns="fireColumns" :fireSource="fireSource">
 	 第一是你需要使用插槽的名称 v-slot的缩写
 	 第二个就是插槽返回来的值，返回是一个对象，所以解构一下获取current对象
     <template #pointName="{current}">
       <div class="green">{{current.pointName}}</div>
       <div class="green">{{current.postTime}}</div>
     </template>
 </safe-index-table>