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代码得节约你多少时间
Dec 20 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vue编程式跳转的实例代码详解
Jul 10 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php中static和const关键字用法分析
2016/12/07 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python多线程并发及测试框架案例
2019/10/15 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python如何建立全零数组
2020/07/19 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
Python编程编写完善的命令行工具
2021/09/15 Python