好资源导航 » 文章资讯 » Vue事件修饰符native、self示例详解

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

2023-08-20 06:24:04 76

事出有因

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

native

修饰符native，有什么用

恶补一下

结合代码说得明白

注意点

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

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

猜测

所以

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

self

作用

引用官方说明

...

结合代码说明

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

总结

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