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 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript中各数制转换全面总结
Aug 21 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
原生js调用json方法总结
Feb 22 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python多进程控制学习小结
2018/10/31 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
如何将json数据转换为python数据
2020/09/04 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
4s客服专员岗位职责
2013/12/01 职场文书
最新党员思想汇报
2014/01/01 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
毕业生自荐书
2014/02/03 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
如何拟写通知正文?
2019/04/02 职场文书