插槽
子组件中通过slot标签定义插槽插入的位置,slot标签相当于一个占位符；
插槽分为匿名插槽、具名插槽、动态插槽、作用域插槽
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <!--
* @Description:
* @Author: xiuji
* @Date: 2022-09-07 17:49:20
* @LastEditTime: 2022-09-12 16:06:36
* @LastEditors: Do not edit
-->
<template>
<div class="slot">
<header class="header">
<!-- slot标签相当于一个占位符 -->
<slot name="header"></slot> // 具名插槽
</header>
<main class="main">
<!-- slot标签相当于一个占位符 -->
<slot></slot> // 匿名插槽
</main>
<footer class="footer">
<!-- slot标签相当于一个占位符 -->
<slot name="footer"></slot>
</footer>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
.header {
height: 200px;
background-color: aqua;
}
.main {
height: 300px;
background-color: bisque;
}
.footer {
height: 200px;
background-color: cadetblue;
}
</style>
|
父组件中使用插槽：
1.引入组件
2.使用插槽:在template标签中编写需要插入组件的内容即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!--
* @Description:
* @Author: xiuji
* @Date: 2022-08-31 21:14:30
* @LastEditTime: 2022-09-12 16:06:03
* @LastEditors: Do not edit
-->
<template>
<div class="content">
<Slot>
<template #[name]> // 动态插槽，插槽可以是一个变量名
<div>
我被插入了上面
</div>
</template>
<template #default> // 匿名插槽，可用v-slot或#default
<div>
我被插入了中间
</div>
</template>
<template #footer> // 具名插槽，可用#{name}或v-slot：name
<div>
我被插入了下面
</div>
</template>
</Slot>
</div>
</template>
<script setup lang="ts">
import Slot from '../../components/Slot/index.vue'
import { ref } from 'vue'
const name = ref('header')
const changeSlot = () => {
name.value = 'footer'
}
</script>
|
作用域插槽
父组件动态绑定参数，派发给父组件的slot去使用
1
2
3
4
5
6
7
8
| <main class="main">
<!-- slot标签相当于一个占位符 -->
<div>
<div v-for="(i,k) in 100" :key="k">
<slot :data="i" :length="k"></slot>
</div>
</div>
</main>
|
子组件内通过结构方式取值，可传多个参数
1
2
3
4
5
| <template #default="{data,length}">
<div>
{{data}}---{{length}}
</div>
</template>
|
