一,默认插槽和具名插槽
// 子组件 <template> // 匿名插槽 <slot/> // 具名插槽 <slot name='title'/> </template> // 父组件 <!-- 具名插槽 --> <template #default> <div class="tab-header"> <span>默认插槽</span> </div> </template> <template #title> <div class="tab-header"> <span>角色列表</span> <el-button class="fr" type="primary">新增角色</el-button> </div> </template>
二. 作用域插槽
// 子组件 <template #default="scope"> <slot name="num" :row="scope.row"></slot> </template> // 父组件 <template v-slot:num="row"> <div @click="look(scope)">查看</div> </template>