一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
这部分更多的是codereview部分，就是让自己换个思想，更好的去拆分组件，其中涉及了mixin混入、slot插槽的反插以及Component动态组件的使用等技巧，只是为了开发提供一个思路
因为预案库和指南库结构很像，尾部还有一个对于table列表的分页，如何更优雅的拆分组件是一个问题
1.插槽:
一开始刚进入整个页面，整个初始化页面命名为List.view.vue,代码如下图1：
上面的代码即是最外层的组件
-
外层是一个
Component来动态渲染组件ListGuid或者ListLib组件，但是无论渲染哪个，这两个组件都是有默认插槽的，插槽的内容也就是下面的这段内容
代码中Component组件默认渲染的组件是ListLib，重点看结构，模板里面的一些无关紧要的部分，笔者这里面先略掉了，ListLib中组件中模板的内容如下图：
可以看到，ListLib组件外层还有一层是名为ListLayOut的组件，这里也将通过截图展示，结构内容如下：
-
ListLayOut组件的是由tab、header、匿名slot以及footer的slot组成的 -
在
ListLib组件中的tab的slot中又添加了一个匿名的slot,对应的代码如下：-
<template slot="tab"> <slot></slot> </template>
-
这个默认插槽就如开头提到的，就是为了放入下图中的代码：
2.Mixin混入:
也正好是这个概念，让笔者知道了，知行合一，知道和做到之间真的是隔着多远，一开始接触vue的时候也学过这个混入的概念，但是真正意义上去用还是第一次。
先来看下ListLib组件和ListGuide组件都有table表格，于是通过Mixin混入就成了一种可以偷懒且高效的做法。
他们中ListLayOut的默认插槽插入的内容，也就是下图中红框的部分
vue的ts混入写法如下图:
接着来看下PageViewMixin中的内容:
可以看到，table中所需要的数据data以及分页,还有设置表格高度等
- 可以通过在组件中
同名的方法去替换掉Mixin文件中的请求
附上计算高度的方法:
calcMaxHeight() {
let maxHeight: number|undefined;
this.$nextTick(() => {
try {
const wrap = document.querySelector('.list-layout')?.getBoundingClientRect();
const tab = document.querySelector('.layout__tab')?.getBoundingClientRect();
const header = document.querySelector('.layout__header')?.getBoundingClientRect();
const footer = document.querySelector('.layout__footer')?.getBoundingClientRect();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
maxHeight = wrap!.height - tab!.height - header!.height - footer!.height - 140;
this.$emit('calc-maxheight', maxHeight);
} catch (error) {
console.log('表格高度计算异常:', error);
}
});
}
