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实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
vue component组件使用方法详解
Jul 14 Javascript
js实现登录与注册界面
Nov 01 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
js实现点击选项置顶动画效果
Aug 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP函数常用用法小结
2010/02/08 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
学校安全生产承诺书
2014/05/23 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
期末复习计划
2015/01/19 职场文书
工程款申请报告
2015/05/15 职场文书
回复函范文
2015/07/14 职场文书