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中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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 minixml详解
2008/07/19 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
你懂得怎么写自荐信吗?
2013/12/27 职场文书
高中生自我评语大全
2014/01/19 职场文书
安全生产承诺书
2014/03/26 职场文书
2014年计生标语
2014/06/23 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
办理信用卡工作证明
2014/09/30 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
MySQL 开窗函数
2022/02/15 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers