介绍
vue-oldstyle-events 是一个可以将 Vue.js 组件传统的 DOM 事件（例如 click，keyup 等）与 Vue 事件系统进行桥接的 npm 包。它可以让你以一种更加自然的方式在 Vue 中使用传统 DOM 事件。
安装
你可以使用 npm 或 Yarn 安装 vue-oldstyle-events。
使用 npm：
npm install vue-oldstyle-events
使用 Yarn：
yarn add vue-oldstyle-events
使用方式
使用 vue-oldstyle-events 很简单。只需要将它在 Vue.js 组件中引入并注册即可开始使用。
// 引入 import Vue from 'vue'; import VueOldstyleEvents from 'vue-oldstyle-events'; // 注册 Vue.use(VueOldstyleEvents);
然后，你就可以在组件中使用类似传统 DOM 事件的方式监听事件，例如：
-- -------------------- ---- -------
----------
-----
------- -------------------------- ------------
------
-----------
--------
------ ------- -
-------- -
------------- -
------------------------
-
-
-
---------例子
在以下例子中，我们将使用 vue-oldstyle-events 来为所有表单元素添加 change 事件监听器，当某个表单元素的值发生变化时，会触发相应的事件。
-- -------------------- ---- -------
----------
-----
------ ----------- -------------- -----------------------
------ ------------ --------------- ------------------------
------ --------------- ------------------ ---------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----- ---
------ ---
--------- --
-
--
-------- -
-------------- -
------------------------- -----------
--
--------------- -
-------------------------- ------------
--
------------------ -
----------------------------- ---------------
-
-
-
---------在这个例子中，我们为每个 input 元素都添加了 @change 监听器，并且在值改变时分别触发了 name-change，email-change 和 password-change 事件。
在父组件中，我们可以使用 v-on 监听这些事件：
-- -------------------- ---- -------
----------
-----
-------- --------------------------- -----------------------------
------------------------------------
------
-----------
--------
------ ------ ---- ---------------
------ ------- -
----------- -
------
--
-------- -
------------------- -
----------------- ---------- -------
--
-------------------- -
------------------ ---------- -------
--
----------------------- -
--------------------- ---------- -------
-
-
-
---------如上所示，我们可以将自定义事件以与监听传统 DOM 事件相同的方式传递给 vue-oldstyle-events，然后在组件中在相应的方法中使用 $emit 触发自定义事件即可。
总结
vue-oldstyle-events 让我们可以更自然地在 Vue.js 中使用传统 DOM 事件，并为我们提供了更简单的事件管理体验。有了它，我们可以更快地开发出高质量、易于维护的 Vue 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546181e8991b448d1abd