一、根据插槽有无的情况,显示图标
v-if="$slots.before"
mounted() {
console.log(this.$slots)
}
二、row属性
1、通过row拿到当前结构渲染的数据
1.1循环渲染data数据
<el-table :data="[{ name: '88' }, { name: '99' }, { name: '11' }]">
1.2v-slot拿到obj对象,其下有一个row属性,该属性表示当前结构渲染的所有数据
<template v-slot="obj">
{{ obj.row }}
</template>
<!-- <template v-slot="{ row }">
{{ row }}
</template> -->
图片引用自:之前vue笔记 slot插槽
2、通过row拿到父组件list长度
2.1、父组件传入数据
<PageTool :list=[{},{},{},{}]>
<tempalate #before='obj'>
{{JSON.stringify(obj)}}
<span>{{obj.row}}</span>
</tempalate>
</PageTool>
2.2子组件接收数据
props:{
list:{
type:Array,
default:()=>([])
}
}
2.3子组件插槽传入数据
<slot :row='list.length'/>
2.4结论
JSON.stringify(obj) ==={"row":3}
3、图示:
父组件
子组件