vue slot作用域插槽 slotProps 传值

子组件

<template>
	<td v-for="column in columns" :key="`${column.key}_${index}`">
	   <slot
	     v-if="column.slot"
	     :name="column.key"
	     :record="item"
	     :index="index"
	   ></slot>
	 </td>
</template>
<script>
	export default {
		data() {
			columns: [
 						  { key: 'ranking', title: '排名', slot: 'ranking' },
						  { key: 'range', title: '城市' },
						  { key: 'satisfaction', title: '满意度', },
						  { key: 'bsc', title: '触点', slot: 'bsc' }
					]
			}
	}
</script>

父组件

<template>
	<list class="list-wrapper">
		<template #ranking="slotProps">
			{{slotProps}} // { "index": 0, "record": { "key": "ranking", "title": "排名", "slot": "ranking", "index": 0 } }
		</template>
		<template #bsc="slotProps">
            <li>{{slotProps}}</li> // { "index": 3, "record": { "key": "bsc", "title": "触点", "slot": "bsc", "index": 3 } }
            <li>{{slotProps.record}}</li> // "record": { "key": "bsc", "title": "触点", "slot": "bsc"}
        </template>
	</list>
</template>

总结：slotProps是当前插槽bind绑定的所有数据
小计：vue component 动态组件可以用is判断当前渲染的组件，以及mixins可以用作项目中的整体逻辑设置