Vue事件修饰符native、self示例详解
事出有因
创新互联主要从事网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务虹口,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
之前面试被问到的native和self相关问题,self我觉得自己应该能回答出来,可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下,不足之处望补充,相互进步
native
修饰符native,有什么用
- native是原生事件(第一反应,当时没然后了...)
恶补一下
- native 一定是用于自定义组件,也就是自定义的html标签
结合代码说得明白
注意点
- 当
,子组件中的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返回值中查找的
为什么有时候组件点击事件不会生效
猜测
- 子组件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