这是我参与「第四届青训营 」笔记创作活动的第5天,以下是我对如何封装一个掘金目录组件的总结 本文内容不含具体的代码的实现，但是我会把需要的关键思路写出来

首先是思路

1. 判断每个目录组件是否在页面中出现，将这个状态派发到全局状态中(这里我使用pinia)，在目录列表组件中展示每个目录组件的内容，并激活出现在页面的中的组件。但是这个方法有一个缺陷就是当页面中有多个目录一起显示的时候就会激活两个或两个以上
2. 将每个目录组件距离浏览器窗口距离派发到全局状态中，在目录列表中展示每个目录组件的内容，并激活距离最近的组件。这个方法不会有上一个方法的缺陷，所以我选择用这个方法来实现组件

如何设计组件

1. 对于展示的在页面的中目录组件，我选择让其只有一个根元素+插槽位置，这样的好处是:根元素就可以获取到距离浏览器窗口的位置了，而插槽则可以为开发侧留出更多的空间。那么这个组件还需要别的参数吗？答案是需要的，因为插槽的设计，所以这个组件如果不设置参数，就无法知道需要派发什么内容，他至少需要知道内容和类型
2. 对于目录列表组件简单来说，就是将全局状态中收集到的组件内容展示出来，并根据距离排序找出最近的且在页面中的组件。

注意事项

1. 由于展示的在页面的中目录组件派发的数据需要获取dom，所以派发的时机应该为dom挂载以后
2. 目录展示列表在每次销毁后需要重制全局状态，不然的话全局状态的数据会越来越多。