1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
2.分类：默认插槽、具名插槽、作用域插槽
3.使用方式：
①默认插槽 当父组件没有插入时，插槽显示默认内容（一般slot标签内部不写内容）
父组件中：
<Category>
<div>父组件使用插槽后的内容</div>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
②具名插槽 使用场景很多
1 父组件中：
2 <HelloWorld>
3 <template slot="center"> <!--1. 这种写法废弃 -->
4 <div>html结构1</div>
5 </template>
6
7 <template v-slot:footer> <!--2. 新写法 #footer -->
8 <div>html结构2</div>
9 </template>
10 </HelloWorld>
11 子组件中：
12 <template>
13 <div>
14 <!-- 定义插槽 -->
15 <slot name="center">插槽默认内容...</slot>
16 <slot name="footer">插槽默认内容...</slot>
17 </div>
18 </template>
③作用域插槽
数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，比如两个地方都需要使用这个子组件，但是在子组件需要展示不同是数据结构，可以通过这个方法解决。
1 //父组件根据子组件的数据生成对应的结构插入到子组件中去
2 <template>
3 <div>
4 <HelloWorld :tableData="tableData">
5 <template v-slot:default="scope"> 新写法 #default="scope"
6 {{scope.data.name}} //data是子组件slot传过来的值
7 </template>
8 </HelloWorld>
9 </div>
10 </template>
11
12 <script>
13 import { reactive, toRefs } from "vue";
14 import HelloWorld from "../components/HelloWorld.vue";
15 export default {
16 components: { HelloWorld },
17 setup() {
18 const state = reactive({
19 tableData: [
20 {
21 date: "2016-05-02",
22 name: "王小虎",
23 province: "上海",
24 city: "普陀区",
25 address: "上海市普陀区金沙江路 1518 弄",
26 slot: 'data',
27 },
28 {
29 date: "2016-05-04",
30 name: "王小虎",
31 province: "上海",
32 city: "普陀区",
33 address: "上海市普陀区金沙江路 1517 弄",
34 zip: 200333,
35 slot: 'name',
36 },
37 {
38 date: "2016-05-01",
39 name: "王小虎",
40 province: "上海",
41 city: "普陀区",
42 address: "上海市普陀区金沙江路 1519 弄",
43 zip: 200333,
44 slot: 'province',
45
46 },
47 {
48 date: "2016-05-03",
49 name: "王小虎",
50 province: "上海",
51 city: "普陀区",
52 address: "上海市普陀区金沙江路 1516 弄",
53 zip: 200333,
54 slot: 'address',
55 },
56 ],
57 });
58
59 return {
60 ...toRefs(state),
61 };
62 },
63 };
64 </script>
65
66 //子组件将数据传递给父组件
67 <template>
68 <div>
69 <li v-for="(item, index) in tableData" :key="index">
70 <slot :data="item" :index="index"></slot>
71 </li>
72 </div>
73 </template>
74
75 <script>
76 import { reactive, toRefs } from "vue";
77
78 export default {
79 props: ["tableData"],
80 setup() {
81 const state = reactive({
82 count: "子组件",
83 });
84
85 return {
86 ...toRefs(state),
87 };
88 },
89 };
90 </script>
91
92 <style>
93
94 </style>
