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://kswjz.com/article/iigpch.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们