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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
vue-test-utils初使用详解
May 23 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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
图解上海144收音机
2021/03/02 无线电
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php计算title标题相似比的方法
2015/07/29 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
javascript实现密码验证
2015/11/10 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python列表切片操作实例总结
2019/02/19 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
python简单实现插入排序实例代码
2020/12/16 Python
保安员岗位职责
2013/11/17 职场文书
学生打架检讨书大全
2014/01/23 职场文书
创业计划书模版
2014/02/05 职场文书
中专自我鉴定
2014/02/05 职场文书
文明寝室标语
2014/06/13 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL