Vue如何实现监听组件原生事件

在首页开发中，右下角有一个返回顶部的小箭头，将它单独封装成一个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获取数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • Vue单文件组件开发实现过程详解

    第一步:配置环境 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装@vue/cli cnpm install -g @vue/cli 检查版本是否正确 vue --version 使用vue.server和vue.build对*.vue文件进行快速原型开发,需要安装vue serve cnpm install -g @vue/cli-service-global 新建一个App.vue文件测试安装是否

  • vue抽出组件并传值实例

    使用父组件向子组件传值的方式 1,抽出的组件以及写法 2,注册使用的父组件以及传值,父组件return images 补充知识:vue如何抽取公共组件并全局注册 项目的抽象程度越高,代码修改起来就越方便,如何抽取一个公共的组件并且全局注册呢? 步骤 结构图 公共组件代码 <template> <img class="wordLook" :src="imgWifi" width="17%" @click="wifiBri

  • vue 组件简介

    什么是组件? web的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘.键盘.鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用. web页面就是由一个个类似这样的部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行. 前端组件化的核心思路就是将一个巨大复杂的东西才分成粒度合理的小东西. 使

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错 如: // 假如path = '@/views/user' const com = () => import(path) // 这样会报错哦 const com2 = (

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • 解决vue的router组件component在import时不能使用变量问题

    webpack 编译es6 动态引入 import() 时不能传入变量,例如dir ='path/to/my/file.js' : import(dir) , 而要传入字符串 import('path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态. 但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack:例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,

  • vue实现从外部修改组件内部的变量的值

    1.首先是如何给你定义的变量拿到数据: 这里我自己用的是vuex: 首先在你项目的src文件夹下创建这么一个目录: 之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据, 以下是index.js的代码: 随后就是在homedatas中获取数据了,以下是homedatas.js代码: 以上就是获取数据的步骤,之后就是在页面中拿到这个获取到的数据: 首当其冲不可少的就是引用,引用vuex和引用组件: 之后在页面的jascript中的export defau

  • Vue组件间数据传递的方式(3种)

    vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export

  • vue内置组件component--通过is属性动态渲染组件操作

    我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com

随机推荐