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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
详解Vue slot插槽
Nov 20 Vue.js
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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
codeigniter中测试通过的分页类示例
2014/04/17 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP中常用的魔术方法
2017/04/28 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
jquery 问答知识整理
2010/02/11 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
经济系大学生求职信
2013/10/01 职场文书
元旦晚会策划方案
2014/02/18 职场文书
《问银河》教学反思
2014/02/19 职场文书
个性婚礼策划方案
2014/05/17 职场文书
上课不认真检讨书
2014/09/17 职场文书
学生检讨书范文
2015/01/27 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python