Vue 实例中使用$refs的注意事项


Posted in Vue.js onJanuary 29, 2021

在开发过程中,经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件,并进行相应操作,但存在取不到元素的情况,其根本原因是因为$refs只能取得mounted(渲染)之后的元素。

Vue 实例中使用$refs的注意事项

例如,在这种情况中,若flag从真值切换到假值取不到节点是正常的,因为v-if如果为假值,那么该节点不会被渲染。

但如果从假值切换到真值时,也可能取不到节点,这是因为渲染需要时间,通常可以使用$nextTick()解决。

...
<el-table v-if="flag" ref="table">
  <el-table-column prop="prop1"></el-table-column>
  <el-table-column prop="prop2"></el-table-column>
</el-table>
...
 
 
export default {
  methods: {
    this.$refs.table.XXX()
  }
}

但存在一个极特殊的情况,第一次页面渲染的时候,$refs也取不到值。这个时候就要考虑v-show进行组件元素的隐藏与展示。

因为v-show是通过css的display:none进行隐藏控制,所以一开始就会渲染,肯定能够取到元素

补充:Vue.js中ref ($refs)用法举例总结及应注意的坑

一、根据官方文档总结的用法:

看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。

1、ref使用在外面的组件上

HTML 部分

<div id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref在外面的组件上</p>
</div>

js部分

var refoutsidecomponentTem={
    template:"<div class='childComp'><h5>我是子组件</h5></div>"
  };
  var refoutsidecomponent=new Vue({
    el:"#ref-outside-component",
    components:{
      "component-father":refoutsidecomponentTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-component   vue实例
        console.log(this.$refs.outsideComponentRef); // div.childComp vue实例
      }
    }
  });

2、ref使用在外面的元素上

HTML部分

<!--ref在外面的元素上-->
<div id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref在外面的元素上</p>
</div>

JS部分

var refoutsidedomTem={
    template:"<div class='childComp'><h5>我是子组件</h5></div>"
  };
  var refoutsidedom=new Vue({
    el:"#ref-outside-dom",
    components:{
      "component-father":refoutsidedomTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-dom  vue实例
        console.log(this.$refs.outsideDomRef); //  <p> ref在外面的元素上</p>
      }
    }
  });

3、ref使用在里面的元素上---局部注册组件

HTML部分

<!--ref在里面的元素上-->
<div id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref在里面的元素上</p>
</div>

JS部分

var refinsidedomTem={
    template:"<div class='childComp' v-on:click='consoleRef'>" +
            "<h5 ref='insideDomRef'>我是子组件</h5>" +
         "</div>",
    methods:{
      consoleRef:function () {
        console.log(this); // div.childComp  vue实例 
        console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
      }
    }
  };
  var refinsidedom=new Vue({
    el:"#ref-inside-dom",
    components:{
      "component-father":refinsidedomTem
    }
  });

4、ref使用在里面的元素上---全局注册组件

HTML部分

<!--ref在里面的元素上--全局注册-->
<div id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

JS部分

Vue.component("ref-inside-dom-quanjv",{
    template:"<div class='insideFather'> " +
          "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
          " <p>ref在里面的元素上--全局注册 </p> " +
         "</div>",
    methods:{
      showinsideDomRef:function () {
        console.log(this); //这里的this其实还是div.insideFather
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });
  var refinsidedomall=new Vue({
    el:"#ref-inside-dom-all"
  });

二、应注意的坑

1、如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref =某变量 ;

这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号

Vue 实例中使用$refs的注意事项

2、通过 :ref =某变量 添加ref(即加了:号) ,如果想获取该ref时需要加 [0],如this.$refs[refsArrayItem] [0];如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加,如this.$refs[refsArrayItem]

Vue 实例中使用$refs的注意事项

加和不加[0]的区别--未展开

Vue 实例中使用$refs的注意事项

加和不加[0]的区别--展开了

3、想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$refs. imgLocal2:

console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
    setTimeout(() => {
     console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
    }, 500); // 不推荐
    this.$nextTick(() => {
     console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
    });

Vue 实例中使用$refs的注意事项

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
全面解析Vue中的$nextTick
Dec 24 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 #Vue.js
聊聊vue 中的v-on参数问题
Jan 29 #Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 #Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
微信小程序签到功能
2018/10/31 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python3实现多线程聊天室
2018/12/12 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Django缓存系统实现过程解析
2019/08/02 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
什么是python的id函数
2020/06/11 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python如何调用百度识图api
2020/09/29 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
大学四年个人自我小结
2014/03/05 职场文书
结婚喜宴主持词
2014/03/14 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript