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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
如何在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
Session的工作方式
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php自动加载方式集合
2016/04/04 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
wxpython实现图书管理系统
2018/03/12 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Django框架请求生命周期实现原理
2020/11/13 Python
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
三方合作协议书范本
2014/04/18 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
Python如何加载模型并查看网络
2022/07/15 Python