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 相关文章推荐
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
Vant picker 多级联动操作
Nov 02 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缓存技术介绍
2006/11/25 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php实现的漂亮分页方法
2014/04/17 PHP
跟我学Laravel之路由
2014/10/15 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
深入理解node.js http模块
2018/01/24 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
分析Python读取文件时的路径问题
2018/02/11 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
学雷锋标语
2014/06/25 职场文书
普通党员整改措施
2014/10/24 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年防汛工作总结
2015/05/15 职场文书