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 相关文章推荐
一个可拖拽列宽表格实例演示
Nov 26 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
浅谈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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
PHP之header函数详解
2021/03/02 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python实现石头剪刀布程序
2021/01/20 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
SQL数据库笔试题
2016/03/08 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
党员组织关系介绍信
2014/02/13 职场文书
校园演讲稿汇总
2014/05/21 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android