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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
浅谈JavaScript字符集
May 22 Javascript
Javascript学习指南
Dec 01 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
js微信分享实现代码
Oct 11 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
layui 表单标签的校验方法
Sep 04 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 for 循环语句使用方法详细说明
2010/05/09 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
浅析NumPy 切片和索引
2020/09/02 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
项目合作计划书
2014/01/09 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
党员心得体会范文2016
2016/01/23 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS