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 callBack 返回前一页的js方法
Nov 30 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
canvas知识总结
Jan 25 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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中memcache的应用
2013/06/18 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php按单词截取字符串的方法
2015/04/07 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php生成图片验证码的方法
2016/04/15 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python中的自省(反射)详解
2015/06/02 Python
python决策树之C4.5算法详解
2017/12/20 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python程序暂停的正常处理方法
2019/11/07 Python
一文读懂Python 枚举
2020/08/25 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
全球在线商店:BerryLook
2019/04/14 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
市场部经理岗位职责
2014/04/10 职场文书
如何写求职信
2014/05/24 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
班主任经验交流材料
2014/12/16 职场文书
2019教师的学习计划
2019/06/25 职场文书
Python中字符串对象语法分享
2022/02/24 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android