vue @click与@click.native,及vue事件机制的使用分析

目录

• @click与@click.native及vue事件机制
• 点击事件@click 失效

@click与@click.native及vue事件机制

vue维护了自己的事件机制。

所以就有了原生DOM事件和自定义事件的区别，比如下面这段官网原话。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

本文也将围绕这一句话展开。

想必大家都会在自定义组件中自定义事件。

那么如何给自定义组价添加原生事件呢，其实想一想理论上是不可行的，因为自定义组件最终不会渲染到页面上，怎么加？

所以Vue给自定义组件绑定原生事件的做法是：把原生事件绑定到组件的根节点，根节点就只有一个嘛…

但是你要告诉vue，当前要给原生节点绑定DOM事件，而不是自定义事件。如下： 

或者直接简单的使用.native。

好了，你已经了解了.native的用途。接下来，再说一说原生节点绑定自定义DOM事件。直接看代码如下：

我们通过原生的事件派发机制可以触发绑定到原生元素的事件。说明vue帮你做的事情其实是

app.addEventListener('customizedEvent', myEvent, false);

也就是说并非走的组件中的自定义事件，而是原生的DOM事件。 

点击事件@click 失效

问题：在标签上设置点击事件@click，发现无法触发事件发生

原因：发现这个标签上有个全局样式，对它造成了影响;

pointer-event: none

解决：将这个属性值改为auto即可

pointer-event: auto

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。