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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
vue2路由基本用法实例分析
Mar 06 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生成静态HTML速度快类库
2007/03/18 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
父母对孩子说的话
2014/04/12 职场文书
精神病医院见习报告
2014/11/03 职场文书
圣诞节开幕词
2015/01/29 职场文书
员工自我评价范文
2015/03/11 职场文书
刑事上诉状范文
2015/05/22 职场文书
行政处罚事先告知书
2015/07/01 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python