Vue如何实现监听组件原生事件


Posted in Javascript onJuly 03, 2020

在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件。如果直接在BackTop组件里面监听,则需要通过this.$emit将事件发射到Home组件中,又在Home中监听自定义事件,比较复杂。因此,我们直接在Home中对BackTop组件进行监听,使用 .native

官网对于native的解释为:

.native:监听组件根元素的原生事件

代码如下:

在Home.vue中对back-top组件进行点击事件监听:

Vue如何实现监听组件原生事件Vue如何实现监听组件原生事件

this.$refs.scroll 得到的是 Scroll 组件,this.$refs.scroll.scroll 得到的是Scroll组件中 data 中定义的 scroll属性,

Vue如何实现监听组件原生事件

better-scroll中有个方法是 scrollTo,

Vue如何实现监听组件原生事件

这里顺便讲解一下 ref 属性的使用:

ref 被用来给DOM元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。$refs 是所有注册过的ref的一个集合,

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

1.在普通的dom结构中,在元素上添加ref属性,this.$refs.ref获取的是具有这个ref属性的dom节点

2.在vue组件中,this.$refs.ref获取的是组件的实例,组件中的data可以直接this.$refs.ref.key获取数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
JavaScrip如果基于url实现图片下载
Jul 03 #Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 #Javascript
JavaScript如何判断对象有某属性
Jul 03 #Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 #Javascript
You might like
PHP number_format() 函数定义和用法
2012/06/01 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php文件操作相关类实例
2015/06/18 PHP
php英文单词统计器
2016/06/23 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
Python中join和split用法实例
2015/04/14 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Nginx跨域问题解析与解决
2022/08/05 Servers