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

事出有因

创新互联主要从事网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务虹口,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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

native

修饰符native,有什么用

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

恶补一下

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

结合代码说得明白


 

注意点

  1. ,子组件中的this.$listeners返回的是{click: ƒ},box1的dom上没有绑定click事件(可以打开F12查看),所以这个事件不是原生的click
  2. ,子组件中的this.$listeners返回的是{},box1的dom上绑定了click事件(可以打开F12查看),所以这个事件是原生的click
  3. ,子组件中的this.$listeners返回的是{click: ƒ},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时,只有当两者相等时才会触发回调

总结

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


当前标题:Vue事件修饰符native、self示例详解
标题来源:http://scyanting.com/article/iigpch.html