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

官网对于native的解释为:

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

代码如下：

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

 

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

better-scroll中有个方法是 scrollTo，

这里顺便讲解一下 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获取数据

Vue中如何监听组件的原生事件的更多相关文章

  1. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue中实时监听对象或变量的变化

    demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...

  3. vue中实时监听移动端屏幕高度（采坑后实践）

    最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> ...

  4. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  5. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  6. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  7. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  8. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  9. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

随机推荐

  1. 手机app测试用例怎么写？手机app测试点有哪些？只有干货没有水分，错过绝对后悔！

    一.前言    在当今竞争激烈的市场上一个APP的成功离不开一个可靠的测试工程师.因此,对功能和用户体验有特殊关注的App进行全面测试是必不可少的.如何做到测试用例的百分百覆盖一直是测试用例编写过程中 ...

  2. Certified Scrum Master CSM 中文资料大全

    课程概览 本课程由中国唯一一位获CST认证培训师及LeSS-Friendly Scrum Trainer双重认证讲师,丰富一线实战经验的Scrum教练讲授:姜信宝 BoB Jiang. 敏捷变革中心是 ...

  3. composer+psr-4实现自动加载

    自动加载 对于库的自动加载信息,Composer 生成了一个 vendor/autoload.php 文件.你可以简单的引入这个文件,你会得到一个免费的自动加载支持. require 'vendor/ ...

  4. uniq 只能相邻行去重

    uniq只可以将相邻行重复数据进行去重处理: [root@localhost /data/mysql/mysql3306]#last | cut -d ' ' -f 1 | tail -15 > ...

  5. CodeForces-1058B B. Vasya and Cornfield

    这题,我真的不知道题解是啥,自己看代码吧. #include<iostream> using namespace std; int main() { int n, d,m,i,x,y; c ...

  6. 基于UDP的客户端和服务器端的代码设计

    实验平台 linux 实验内容 编写UDP服务器和客户端程序,客户端发送消息,服务器接收消息,并打印客户端的IP地址和端口号. 实验原理 UDP是无需连接的通信,其主要实现过程如下: 同样,我们可以按 ...

  7. uniapp 踩坑

    获取数据 可在 onLoad 生命周期中获取数据,接收一个参数 option 为上个页面传递的参数. 点击事件tap代替click 两者都会在点击时触发,但是在web手机端,clikc会有300ms延 ...

  8. 《C程序设计语言》 练习2-1

    问题描述 编写一个程序以确定分别由signed及unsigned限定的char.short.int及long类型变量的取值范围.采用打印标准头文件中的相应值以及直接计算两种方式实现 Write a p ...

  9. 自定义View实战

    PS:上一篇从0开始学自定义View有博友给我留言说要看实战,今天我特意写了几个例子,供大家参考,所画的图案加上动画看着确实让人舒服,喜欢的博友可以直接拿到自己的项目中去使用,由于我这个写的是demo ...

  10. js循环数组方法some和forEach怎么用

    forEach不支持break和return.一般普通循环都是用forEach ar arr1=["aa","bb","aa"," ...