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 相关文章推荐
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
php jsonp单引号转义
2014/11/23 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python 里最强的地图绘制神器
2021/03/01 Python
四年大学生活的个人自我评价
2013/12/11 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
党员一句话承诺大全
2014/03/28 职场文书
护理学专业求职信
2014/06/29 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
合理化建议书范文
2015/09/14 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js