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 获取对象 定位子对象
May 31 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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 中文处理技巧
2010/04/25 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
浅谈js原生拖放
2016/11/21 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
深入理解Python装饰器
2016/07/27 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python决策树分类算法学习
2017/12/22 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python在不同条件下的输入与输出
2020/02/13 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
食品安全处置方案
2014/06/14 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
Python Django ORM连表正反操作技巧
2021/06/13 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python