Vue事件修饰符native和self

jhhfft 发布于2019-08-23 18:35 / 3180人阅读

摘要：事出有因之前面试被问到的和相关问题，我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。

事出有因

之前面试被问到的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时，只有当两者相等时才会触发回调

海外云主机私有云修饰符 python修饰符 javaclass修饰符 aspx修饰符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105483.html

Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0
vue源码解析－事件机制

摘要：直接写了组件机制。今天看了下的关于事件的机制。源码都是基于最新的。绑定了事件回调函数的。初始化的时候，将中的方法代理到的同时修饰了事件的回调函数。对于事件有两个底层的处理逻辑。上一章没什么经验。直接写了组件机制。感觉涉及到的东西非常的多，不是很方便讲。今天看了下vue的关于事件的机制。有一些些体会。写出来。大家一起纠正，分享。源码都是基于最新的Vue.js v2.3.0。下面我们来看...

LuDongWei 2019-08-21 11:44 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

itvincent 2019-08-23 15:38 评论0 收藏0
Vue指令详解

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。只当点击鼠标右键时触发只当点击鼠标中键时触发以模式添加侦听器，减少额外的监听，提高性能表示永远不会调用。记住，指令函数能够接受所有合法的表达式。思维导图 showImg(https://segmentfault.com/img/bVbphXZ?w=1920&h=2408); 指令 v-for 关于key 官方...

malakashi 2019-08-30 15:56 评论0 收藏0