一，默认插槽
父组件页面：使用子组件标签
<template><div>我是父组件自己的内容</div><ComTest></ComTest> // 这里使用子组件的内容<!-- <ComTest>我要替换默认插槽的内容</ComTest> // 这里替换子组件的内容 -->
</template>
<script setup lang='ts'>import ComTest from '../components/ComTest.vue';
</script>
子组件：使用<slot></slot>
<template><div ><slot>我是默认插槽</slot></div>
</template>
二，具名插槽
父组件页面：使用 <template v-slot:插槽名></template >
<template><div>我是父组件自己的内容</div><ComTest ><!--插槽语法糖 v-slot:header 等于 #header --><template v-slot:header> 替换具名插槽头部默认信息</template><!--插槽语法糖 v-slot:main 等于 #main --><template v-slot:main>替换具名插槽中间默认信息</template><!--插槽语法糖 v-slot:footer 等于 #footer--><template v-slot:footer>替换具名插槽底部默认信息</template></ComTest>
</template>
子组件：使用<slot name="插槽名"></slot>
<template><div ><header><slot name="header">我是具名插槽头部默认信息</slot></header><main><slot name="main">我是具名插槽中间默认信息</slot></main><footer><slot name="footer">我是具名插槽底部默认信息</slot></footer></div>
</template>
三，作用域插槽
父组件页面：使用 <template v-slot:插槽名 = "scope">{{scope.属性名}}</template >
<template><div>我是父组件自己的内容</div><ComTest ><template v-slot:header="scope">{{ scope.msg}} <!-- 我是作用域插槽头部信息 --></template><template v-slot:main="scope">{{ scope.msg }}<!-- 我是作用域插槽中间信息 --></template><template v-slot:footer="scope">{{ scope.msg }}<!-- 我是作用域插槽底部信息 --></template></ComTest>
</template>
子组件：使用<slot name="插槽名" 属性名='属性值'></slot>
<template><div ><header><slot name="header" msg="我是作用域插槽头部信息">我是具名插槽头部默认信息</slot></header><main><slot name="main" msg="我是作用域插槽中间信息">我是具名插槽中间默认信息</slot></main><footer><slot name="footer" msg="我是作用域插槽底部信息">我是具名插槽底部默认信息</slot></footer></div>
</template>