一、匿名插槽
1.1 定义插槽内容
A.vue: 插入的内容将以h1标题格式显示
<template>
我是插槽a
<h1>
<slot></slot>
</h1>
</template>
1.2 使用插槽
<template>
<A>
<template v-slot>
<div>我是插入的内容</div>
</template>
</A>
</template>
<script setup lang='ts'>
import A from "./components/A.vue";
</script>
<style>
</style>
1.3 页面效果
二、具名插槽
2.1 定义具名插槽
<template>
我是插槽a
<h2>
<slot name="name"></slot>
</h2>
</template>
2.2 使用插槽
<template>
<A>
<template v-slot:name>
<div>我是具名插槽的内容</div>
</template>
</A>
</template>
<script setup lang='ts'>
import A from "./components/A.vue";
</script>
<style>
</style>
2.3 页面效果
2.4 简写
三、作用域插槽
3.1 从插槽内向外传值
3.1.1 定义插槽
<template>
我是插槽a
<h2>
<div v-for="item in data">
<slot name="name" :data="item"></slot>
</div>
</h2>
</template>
<script setup lang="ts">
import { reactive } from "vue";
type names = {
name:string,
age:number
}
const data = reactive<names[]>([{
name:'zhangsan',
age:10
},{
name:'lisi',
age:11
},{
name:'wangwu',
age:12
}])
</script>
3.1.2 接受插槽内容
<template>
<A>
<template v-slot:name ="{data}">
{{ data }}
</template>
</A>
</template>
<script setup lang='ts'>
import A from "./components/A.vue";
</script>
3.1.3 页面效果
3.1.4 插槽内传递多个值
3.1.4.1 插槽定义
<template>
我是插槽a
<h2>
<div v-for="(item,index) in data">
<slot name="name" :index="index" :data="item"></slot>
</div>
</h2>
</template>
<script setup lang="ts">
import { reactive } from "vue";
type names = {
name:string,
age:number
}
const data = reactive<names[]>([{
name:'zhangsan',
age:10
},{
name:'lisi',
age:11
},{
name:'wangwu',
age:12
}])
</script>
3.1.4.2 接受插槽内容
<template>
<A>
<template v-slot:name ="{data,index}" >
{{ index}}.{{ data.age }} -- {{ data.name }}
</template>
</A>
</template>
<script setup lang='ts'>
import A from "./components/A.vue";
</script>
3.1.4.3 页面效果
四、动态插槽
4.1 定义插槽
根据传入的不同插槽名，加载不同的字体大小
<template>
我是插槽a
<h2>
<slot name="slot1"></slot>
</h2>
<h1>
<slot name="slot2"></slot>
</h1>
</template>
<script setup lang="ts">
</script>
4.2 接受插槽内容
4.2.1 使用1号插槽
<template>
我是插槽a
<h2>
<slot name="slot1"></slot>
</h2>
<h1>
<slot name="slot2"></slot>
</h1>
</template>
<script setup lang="ts">
</script>
4.2.2 使用2号插槽
<template>
<A>
<template #[name]>
<div>{{ name }}}</div>
</template>
</A>
</template>
<script setup lang='ts'>
import {ref} from 'vue'
import A from "./components/A.vue";
let name = ref("slot2")
</script>
