Vue2关于具名插槽实现父组件自定义处理子组件数据

目前前端的vue项目技术栈大部分还在延续使用2x版本，当然现在随着3x版本的日趋成熟，更多的项目更加推荐vue3+vite使用；本文主要目标是将2x版本中关于具名插槽的使用梳理清楚

具体插槽的基本使用规则这里就不过多介绍了，可以参考官网，官网的使用介绍是比较详细的，这里主要介绍一种场景：项目中封装了一个全局的公共组件(这里就相当于是一个子组件了),在不同的页面(这里具体的页面就相当于父组件了)调用过程中由于布局、操作不同可能需要根据具体的页面中拿到子组件的数据进行自定义处理，这里主要有两种使用方式

定义子组件：

<template>
	<div class="TableList">
		
		<template v-for="(item,index) in dataList">
			<div :key="index">
<!-- 此处name命名是自定义的,record则是插槽的prop,也是自定义命名,也就是具体的数据 -->
				<slot name="body" :record="item"></slot>
			</div>
		</template>
		
	</div>
</template>

<script>
	export default {
		name:'TableForm',
		data(){
			return {
				dataList: [
					{ name: 'zhangsan', age: 18 },
					{ name: 'lisi', age: 20 },
					{ name: 'wangwu', age: 22 },
				],
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>

父组件调用

<template>
	<div class="container-box">
		<TableForm >
			<!-- 第一种使用主要是常用使用方法，也是推荐用法 -->
			<!-- 此处v-slot:[具体的插槽名,默认default]="{ record }"
			{ record }用了插槽prop解构的写法，也可用<template v-slot:body="soltProps">
			取值则soltProps.record.name -->
			<template v-slot:body="{ record }">
				<view class="table-item borderRadiusPrimary">
					<view class="title">{{ record.name }}</view>
				</view>
			</template>
			
			<!-- 第二种使用则是自2.6.0起被废弃，当然在2x版本中同样在维护使用，3x则已经启用 -->
			<template slot="body" slot-scope="{ record }">
				<view class="table-item borderRadiusPrimary">
					<view class="title">{{ record.name }}</view>
				</view>
			</template>
		</TableForm>

	</div>
</template>

<script>
	import TableForm from './TableForm/index.vue'
	
	export default {
		components:{
			TableForm,
		},
		data(){
			return {
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>