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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
js微信支付实现代码
Dec 22 Javascript
js实现表格筛选功能
Jan 18 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 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生成静态HTML速度快类库
2007/03/18 PHP
php Undefined index的问题
2009/06/01 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
php重定向的三种方法分享
2012/02/22 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
Js+XML 操作
2006/09/20 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
解决uWSGI的编码问题详解
2017/03/24 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python实现KNN近邻算法
2020/12/30 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
《有趣的发现》教学反思
2014/04/15 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
法制宣传标语
2014/06/23 职场文书
公司禁烟通知
2015/04/23 职场文书
标准发言稿结尾
2019/07/18 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫