## 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> ```