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 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
PHP PDO操作总结
Nov 17 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
Node.js简单入门前传
Aug 21 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
微信小程序实现底部弹出模态框
Nov 18 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中取得image按钮传递的name值
2006/10/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
python类继承用法实例分析
2014/10/10 Python
python unittest实现api自动化测试
2018/04/04 Python
python re模块的高级用法详解
2018/06/06 Python
Python检测数据类型的方法总结
2019/05/20 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python读写Excel表格的方法
2021/03/02 Python
中学生学习生活的自我评价
2013/10/26 职场文书
销售人员获奖感言
2014/02/05 职场文书
开平碉楼导游词
2015/02/06 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
太空授课观后感
2015/06/17 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫