为什么 VueJs 引入 .native 事件修饰符？这有什么用例？ - Vue.js

【问题标题】：Why VueJs introduce .native Event modifier ? What are the use case of this? - Vue.js为什么 VueJs 引入 .native 事件修饰符？这有什么用例？ - Vue.js
【发布时间】：2018-05-23 14:14:03
【问题描述】：

我没有得到任何关于 native 事件修饰符的文档。我见过一些这样的地方：

<router-link @click.native="pressThis()"> Press here </router-link>

native 修饰符在router-link 上的用途是什么，单击event。 native 修饰符还有哪些其他用例？

【问题讨论】：

我不确定，我只是假设本机修饰符类似于 isTrusted 事件属性的别名，即仅当事件以本机方式而非编程方式触发时才会触发事件回调。换句话说，不要对合成的不可信事件做出反应。
值得一提的是，.native 在 Vue 3 中不再是必需的。

标签： vue.js vuejs2

【解决方案1】：

您可以在自定义组件中覆盖 Vue 事件。例如，您可能有一个列表组件，一旦您单击一个名为 this.$emit('click', selectedItemData) 的项目，它将向正在观看该项目的父组件发出单击事件。

但是，有时您确实想绑定到原生 HTML/DOM 事件侦听器 element.addEventListener('click', callThisMethod)，这就是 .native 的使用。另外，请注意，一旦您的组件像非本地事件一样被销毁，它将处理清理事件侦听器。

总而言之：当您需要来自 DOM 的“原始”事件时，请使用 .native。

【讨论】：

当我需要来自 DOM 的原始事件时，我听到您说使用 .native。不过，我最近遇到了一个奇怪的情况，其中 - 取决于我使用按钮组件的位置 - .native 没有被触发。我在这里描述了这一点：cutt.ly/xrCmp7M。你对此有什么想法或解释吗？提前谢谢你。