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


Posted in Javascript onJuly 09, 2019

事出有因

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

native

修饰符native,有什么用

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

恶补一下

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

结合代码说得明白

<body>
 <div id="app">
  <div class="box" >
   <Son @click='handler1'></Son>
  </div>
 </div>

</body>
<script>
 const Son = Vue.component('Son', {
  template: '<button @mouseover=handler2 class="box1">son</button>',
  methods: {
   handler2 (e) {
    
   }
  }
 })
 new Vue({
  el: "#app",
  components: {
   Son
  },
  data() {
   return {
    a: 123
   }
  },
  methods: {
   handler1 (e) {
    console.log('父级')
   }
  }
 })

</script>

注意点

  1. 当<Son @click='handler1'></Son>,子组件中的this.$listeners返回的是{click: ƒ},box1的dom上没有绑定click事件(可以打开F12查看),所以这个事件不是原生的click
  2. 当<Son @click.native='handler1'></Son>,子组件中的this.$listeners返回的是{},box1的dom上绑定了click事件(可以打开F12查看),所以这个事件是原生的click
  3. 当<Son @click.self='handler1'></Son>,子组件中的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

作用

引用官方说明

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

结合代码说明

<body>
 <div id="app">
  <div class="box" @click.self='handler1'>
   <Son ></Son>
  </div>
 </div>

</body>
<script>
 const Son = Vue.component('Son', {
  template: '<button @click=handler2 class="box1">son</button>',
  methods: {
   handler2 (e) {
    console.log(e.target, e.currentTarget)
   }
  }
 })
 new Vue({
  el: "#app",
  components: {
   Son
  },
  data() {
   return {
    a: 123
   }
  },
  methods: {
   handler1 (e) {
    console.log(e.target, e.currentTarget)
   }
  }
 })
</script>

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

总结

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

Javascript 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
浅析javascript函数表达式
Feb 10 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
vue-cli3 热更新配置操作
Sep 18 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 #Javascript
微信小程序wx.request拦截器使用详解
Jul 09 #Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 #Javascript
Vue 实现前端权限控制的示例代码
Jul 09 #Javascript
微信小程序文章详情页跳转案例详解
Jul 09 #Javascript
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP 8新特性简介
2020/08/18 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
python中MySQLdb模块用法实例
2014/11/10 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
浅析python参数的知识点
2018/12/10 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
生产班组长岗位职责
2014/01/05 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
小学语文教学反思
2014/02/10 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
美容院经理岗位职责
2014/04/03 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
Redis keys命令的具体使用
2022/06/05 Redis