Vue3从0到1开发组件前戏（中）：$emit,$on,$off替代方案

本系列中会用到的第三方库

一、起因

上一篇文章中说过，在Vue的新版本，Vue3中删除了$on,$once,$off等方法，$emit仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。

但是既然是组件开发，那么组件与组件之间的通信，组件与父级之间的通信肯定是少不了的，$emit方法虽然已经能满足半数以上的通信需求，但是剩下满足不了的部分，就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。

Vue3迁移文档中提及:在 Vue 3 中，已经不可能使用这些 API 从组件内部监听组件自己发出的事件了，该用例暂没有迁移的方法。。但是在使用第三方库之前，我还是挣扎了一下，用其他方式去完成预期的功能，但是最终结合性能、复杂度等方面来考虑，还是通过引入第三方库的方式来使用这几个方法。

不过值得一提的是，如果只考虑当前项目，可以使用Vuex来实现，但是一个组件库不好自带VueX到处跑，所以最终还是使用了mitt，这个库不依赖某个框架，其本身的实现也比较简单。

但是不好对方法、事件进行溯源，所以各位在实际开发中，就需要根据具体情况进行选择了，仁者见仁。

作者还是以学习为主，虽然$emit等几个方法已经用了很多次了，但是自己按照别人的库手抄一遍并且去理解其核心原理还是首次。

下文就简单讲讲对其中几个方法实现的简单理解。

如果看不懂也没关系，我会尽量锻炼我的文笔，并且在后面的组件开发过程中去深入讲解，以及分享一些使用心得。

一库：mitt.js $on等方法的平替

别问我为什么用一库， 懂的都懂。

选择mitt.js这个库原因有二，其一是我在学习组件开发的时候，抄的开源库relax-plus(gitee)中的mitt库的写法，对比原仓库中的mitt开源代码进行了一些修改，所以在我在开发过程中也一直是在使用这个库。其二这也是Vue3在迁移文档中点名推荐的平替方案。

1、数据保存

将mitt方法要做的事做个比喻，该库的作用好比一辆公交车，上面的东西任意取用($on)，如果你有什么信息需要传达出去也可以将至放在($emit)车上；如果不想公开了也可以把它撤下来($off)。

当然，最终可实现的方法肯定不只这几个， 但是这差不多是最核心的一个作用了。其他的方法在需要的地方也会一一提到。

先来说说这辆“车”是如何保存货物的。

这里用到的是ES6带来的新的数据结构Map了，相比起传统的对象的键值对方式， Map采用的“值-值”的方式存储数据，更加实用，也更加灵活。

而在mitt库中，实用Map数据结构来作为数据的存储方