vue中的ref和$refs的使用


Posted in Javascript onNovember 22, 2018

ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。

ref 有三种用法:

1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

普通的DOM元素上使用

<div id="app7">
  <input type="text"ref="TEXT"/ >
  <button @click="add">添加</button>
</div>
var app7=new Vue({
  el:"#app7",
  data:{

  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

子组件上使用

<div id="app7">
  <aaa ref=inputText></aaa>
  <input type="text"ref="TEXT" >
  <button @click="add">添加</button>
</div>
Vue.component('aaa',{
    template:"<div>我是一个组件</div>"
  })
  var app7=new Vue({
    el:"#app7",
    data:{

    },
    methods:{
      add:function(){
        console.log(this.$refs.inputText);
        console.log(this.$refs);
      }
    }
  })
  var aaa=app7.$refs.inputText;
  //console.log(aaa);
  //console.log(aaa.$el.innerText);

$refs:一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例

注意:$refs只会在组件渲染完成之后生效,并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 #Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 #Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 #Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
微信上传视频文件提示(推荐)
Nov 22 #Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 #Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
使用PHP编写的SVN类
2013/07/18 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python实现通讯录功能
2018/02/22 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
简单了解python协程的相关知识
2019/08/31 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
化验室技术员岗位职责
2013/12/24 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
运动会800米赞词
2015/07/22 职场文书