介绍
vue-event-loader 是一个可以将 Vue 组件内的事件解析成 json 格式的工具，它可以将事件的相关信息，例如：事件名、绑定的方法、是否为原生事件、是否为 once 等等详细信息，转换成可读性强的 json 数据。
安装
你可以使用 npm 来安装 vue-event-loader，输入以下命令即可：
npm install vue-event-loader --save-dev
使用
在 Vue 组件的 <script> 标签内，我们可以通过 import 引入该 npm 包，接下来就可以在组件内使用它提供的 event-loader 私有指令了。
-- -------------------- ---- -------
----------
-----
------- ---------------------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- - ----------- --
-------- -
-------------- -
-----------------------
--
--
--
---------然后我们在按钮组件上，绑定 EventLoader 指令来解析事件，将解析结果绑定在一个变量上，最后在组件内，将这个变量打印出来。
-- -------------------- ---- -------
----------
-----
------- ------------------------- ----------------------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- - ----------- --
------ -
------ -
---------- -----
--
--
-------- -
-------------- -
-----------------------
--
--
--
---------上述代码中，我们将 EventLoader 指令绑定在 button 元素上，并为 v-event-loader 属性绑定 eventData 变量。在按钮被点击后，eventData 将包含事件的解析结果，我们可以将其打印到控制台上。
解析事件的结果
事件的解析结果是一个包含 name、handler 和 options 三个属性的 json 对象。
-- -------------------- ---- -------
-
------- --------
---------- ---------------
---------- -
---------- ------
------- ------
---------- -----
-
-name 表示事件的名称，handler 表示绑定的事件处理函数名称，options 为选项参数，可以用来表示该事件是否使用了 capture、once 或者 passive。这些选项在事件处理函数比较复杂的时候，非常有用。
示例
-- -------------------- ---- -------
----------
-----
------- ------------------------- ----------------------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- - ----------- --
------ -
------ -
---------- -----
--
--
-------- -
-------------- -
-----------------------
--
--
--
---------总结
vue-event-loader 是一个非常实用的工具，它可以让我们更方便地理解组件内的事件，也可以在一些需要动态绑定事件处理函数的情况下，更容易地调试和排查问题。学习和掌握它，将有助于你更好地利用 Vue 框架，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e8838