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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
javascript实现微信分享
Dec 23 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python采集百度百科的方法
2015/06/05 Python
给Python入门者的一些编程建议
2015/06/15 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
优秀民警事迹材料
2014/01/29 职场文书
全神贯注教学反思
2014/02/03 职场文书
同学会主持词
2014/03/18 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
初级党校心得体会
2014/09/11 职场文书
擅自离岗检讨书
2014/09/12 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
跳高加油稿
2015/07/21 职场文书