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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php生成二维码图片方法汇总
2016/12/17 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python实现合并两个数组的方法
2015/05/16 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python的垃圾回收机制详解
2019/08/28 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python列表如何更新值
2020/05/27 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
上海方立数码笔试题
2013/10/18 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
机电一体化大学生求职信
2013/11/08 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
python爬虫selenium模块详解
2021/03/30 Python