1 <template>
2 <div class="slot-test">
3 <!-- vue插槽应用总结： -->
4
5 <!-- 1. 具名插槽：给插槽添加一个name属性； -->
6
7 <!-- eg1: -->
8 <!-- 子组件： -->
9 <div class="container">
10 <header>
11 <slot name="header"></slot>
12 </header>
13 <main>
14 <!-- 这里其实就是name为default的具名插槽 -->
15 <slot></slot>
16 <!-- 等价于 -->
17 <slot name="default"></slot>
18 </main>
19 <footer>
20 <slot name="footer"></slot>
21 </footer>
22 </div>
23
24 <!-- 父组件： -->
25 <base-layout>
26 <!-- 以下三种写法都可以 -->
27 <!-- <template v-slot:header> -->
28 <!-- <template #header> -->
29 <!-- <template slot="header"> -->
30 <template slot="header">
31 <h1>Here might be a page title</h1>
32 </template>
33
34 <!-- 这里就是默认插槽的内容 -->
35 <p>A paragraph for the main content.</p>
36 <p>And another one.</p>
37
38 <template #footer>
39 <!-- <template v-slot:header> -->
40 <!-- <template slot="header"> -->
41 <p>Here's some contact info</p>
42 </template>
43 </base-layout>
44
45 <!-- 2.作用域插槽：给子组件添加一个可以传输数据的属性 -->
46
47 <!-- eg2: -->
48 <!-- 子组件： -->
49 <span>
50 <!-- 以下两种写法都可以 -->
51 <!-- <slot v-bind:user="user"> -->
52 <slot :user="user">
53 {{ user.lastName }}
54 </slot>
55 </span>
56
57 <!-- 父组件 -->
58 <current-user>
59 <!-- 以下几种写法都可以，其中的slotProps可以是任意名字 -->
60 <!-- <template v-slot:default="slotProps"> -->
61 <!-- <template #default="slotProps"> -->
62 <!-- 这种适用于只有一个插槽的时候
63 <template v-slot="slotProps"> -->
64 <template slotScope="slotProps">
65 {{ slotProps.user.firstName }}
66 </template>
67 </current-user>
68
69 <!-- 3.动态插槽名：可以给插槽名定义变量，设置为动态的 -->
70 <!-- eg3: -->
71 <!-- 子组件 -->
72 <div class="container">
73 <span v-for="(slot, index) in slotList" :key="index">
74 <slot :name="slot"></slot>
75 </span>
76 </div>
77 <!-- 父组件 -->
78 <base-layout>
79 <!-- 以下几种方式都可以 -->
80 <!-- <template v-for="(slot, index) in slotList" v-slot:[slot]>
81 <div :key="index"></div>
82 </template> -->
83 <template v-for="(slot, index) in slotList" #[slot]>
84 <div :key="index"></div>
85 </template>
86 </base-layout>
87
88 <!-- 4.具名插槽、作用域插槽、动态插槽混合应用 -->
89 <!-- eg4: 以ant-design-vue的table组件为例 -->
90
91 <!-- 子组件 -->
92 <a-table :columns="columns" :dataSource="tableData">
93 <template
94 v-for="(slotOpts, idx) in slotList"
95 :slot="slotOpts.slot"
96 slot-scope="text, record, index"
97 >
98 <a
99 v-if="slotOpts.type === 'aClick'"
100 :key="idx"
101 :slot="slotOpts.slot"
102 @click="clickTitle({ ...record, index })"
103 >
104 {{ text }}
105 </a>
106 <div
107 class="table-slot-options"
108 v-if="slotOpts.type === 'other'"
109 :key="idx"
110 >
111 <slot
112 :name="slotOpts.slot"
113 :[slotOpts.slot]="{ text, record, index }"
114 ></slot>
115 </div>
116 </template>
117 </a-table>
118
119 <!-- 父组件 -->
120 <Table :columns="curColumns" :tableData="tableData" :slotList="slotList">
121 <template #operation="{ operation }">
122 <!-- 与下面写法等价 -->
123 <!-- <template slot="operation" slot-scope="{operation}"> -->
124 <!-- <template v-slot:operation="{operation}"> -->
125 <div class="options">
126 插入任意内容
127 {{ operation.index }}
128 </div>
129 </template>
130 <template v-slot:test="{ test }">
131 <!-- 与下面写法等价 -->
132 <!-- <template #test="{ test }"> -->
133 <!-- <template slot="test" slot-scope="{ test }"> -->
134 <div class="test">多个插槽test{{ test }}</div>
135 </template>
136 </Table>
137 </div>
138 </template>
