Vue事件修饰符native、self示例详解

事出有因

之前面试被问到的native和self相关问题，self我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下，不足之处望补充，相互进步

native

修饰符native，有什么用

1. native是原生事件(第一反应，当时没然后了...)

恶补一下

1. native 一定是用于自定义组件，也就是自定义的html标签

结合代码说得明白

注意点

1. 当，子组件中的this.$listeners返回的是{click: &＃402;}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
2. 当，子组件中的this.$listeners返回的是{}，box1的dom上绑定了click事件（可以打开F12查看），所以这个事件是原生的click
3. 当，子组件中的this.$listeners返回的是{click: &＃402;}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
4. 子组件的this.$emit('eventTpye')是从this.$listeners返回值中查找的

为什么有时候组件点击事件不会生效

猜测

• 子组件html标签没有定义click原生事件
• 子组件没有执行this.$emit('click')

所以

直接.native将事件绑定到子组件html标签上，类似dom.addEventListener('click', handler)

self

作用

引用官方说明

...

结合代码说明

就是利用e.target和e.currentTarget，当添加self时，只有当两者相等时才会触发回调

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。