slot插槽

分为具名插槽，匿名插槽（只有1个）, 动态插槽，作用域插槽

1. 使用

<template>
  <div class="wrapper">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="center">
      <!-- 作用域传参：直接采用v-bind的形式 -->
      <slot name="center" :names="names"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
 import { reactive } from "vue"
interface nameParams {
	name: string;
    age: number
}
 const names = reactive<nameParams[]>([
	{name: "zhangsan", age: 12},
    {name: "lisi", age: 13},
    {name: "wangwu", age: 14},
])
</script>

<script lang="ts" setup>
import SlotVue from "@/***/index.vue"
</script>
<template>
	<SlotVue>
        <template v-slot:header></template>
		<!-- 作用域传参：接收子组件传过来的值 -->
        <template #center="{names}">
			{{names}}
		</template>
        <template v-slot:footer></template>
    </SlotVue>
</template>