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>