插槽相当一个占位符,在子组件中占好位置,父组件中的内容对其填充进去
1.匿名插槽
//子组件
<template>
<div class="sad">
<slot></slot>
</div>
</template>
<script setup lang='ts'>
</script>
//父组件
<template>
<div>
<Children>
<h1>213113</h1>
</Children>
</div>
</template>
2.具名插槽,父组件的内容会依据名字的进行一定顺序的填充,即使在父组件是乱序,如果子组件的具名插槽顺序的话,父组件填充过去的内容也是有序的
//子组件
<template>
<div class="sad">
<slot name="c1"></slot>
<slot name="c2"></slot>
<slot name="c3"></slot>
</div>
</template>
//父组件
<template>
<div>
<Children>
<template v-slot:c3>
<h1>第一个</h1>
</template>
<template v-slot:c2>
<h1>第二个</h1>
</template>
<template v-slot:c1>
<h1>第三个</h1>
</template>
</Children>
</div>