vue基本使用--refs获取组件或元素的实例


Posted in Javascript onNovember 07, 2019

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)

使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取

注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods

添加ref属性

<div id="app">
  <h1 ref="h1Ele">这是H1</h1>
  <hello ref="ho"></hello>

  <button @click="getref">获取H1元素</button>
 </div>

获取注册过 ref 的所有组件或元素

methods: {
    getref() {
     // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
      console.log(this.$refs.h1Ele.innerText);
      this.$refs.h1ele.style.color = 'red';// 修改html样式

     console.log(this.$refs.ho.msg);// 获取组件数据
     console.log(this.$refs.ho.test);// 获取组件的方法
    }
   }

以上这篇vue基本使用--refs获取组件或元素的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
js charAt的使用示例
Feb 18 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 #Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 #Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 #Javascript
vue之a-table中实现清空选中的数据
Nov 07 #Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 #Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
ElementUI多个子组件表单的校验管理实现
Nov 07 #Javascript
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JS中表单的使用小结
2014/01/11 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
小程序实现留言板
2018/11/02 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python之PyMongo使用总结
2017/05/26 Python
python中partial()基础用法说明
2018/12/30 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
留学推荐信写作指南
2014/01/25 职场文书
运动会广播稿400字
2014/01/25 职场文书
大学生创业项目方案
2014/03/08 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
2015个人半年总结范文
2015/03/09 职场文书
通讯稿范文
2015/07/22 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python