插槽的使用

场景：当好几个地方都需要使用同一个结构时，可以把这个通用的结构做成插槽，需要使用的地方，直接在插槽地方对应修改即可。

//pageTools.vue
<template><el-card><div class="page-tools"><div class="left"><div class="tips"><slot name="left"/></div></div><div class="right"><slot name="right"/></div></div></el-card>
</template><script>
export default {}
</script><style lang="scss" scoped>
.page-tools{display: flex;justify-content: space-between;align-items: center;
}
.tips{line-height: 34px;padding: 0 15px;border-radius: 5px;border: 1px solid rgba(145,213,255,1);background: rgba(230,247,255,1);i{margin-right: 10px;color: #409eff;}
}
</style>

<template><div><pageTools><template #left><i class="el-icon-info"></i><span>內容展示</span></template><template #right><el-button type="primaty" size="small">导出Excel</el-button></template></pageTools></div>
</template><script>
import pageTools from './pageTools.vue'
export default {components:{pageTools}
}
</script><style></style>

注意点:
1.具名插槽的内容必须使用模板< template ></ template >包裹;
2.推荐使用具名插槽，方便代码追踪且直观清楚;