## 1.匿名插槽 ``` 子組件 <template> <div> <slot></slot> //插槽內容 </div> </template> ``` 父組件使用插槽 ``` <Son> <template v-slot> <div>插槽內容</div> </template> </Son> ``` ## 2.具名插槽 ``` 子組件 <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> ``` ``` 父組件使用 <Son> <template v-slot:header> <div>頭部</div> </template> <template v-slot> <div>默認</div> </template> <template v-slot:footer> <div>底部</div> </template> </Son> 簡寫方式：# + 插槽名稱： 如：默認的是#default <template #:header> <div>頭部</div> </template> ``` ## 3.作用域插槽 ``` <el-table-column label="條件" prop="cond"> <template slot-scope="scope"> <span>{{scope.row.cond}}</span> </template> </el-table-column> ```