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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 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
用php来检测proxy
2006/10/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
浅谈PHP的反射API
2017/02/26 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
浅谈js闭包理解
2019/04/01 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python中with及contextlib的用法详解
2017/06/08 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python利用opencv保存、播放视频
2020/11/02 Python
scrapy头部修改的方法详解
2020/12/06 Python
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
优秀团员事迹材料
2014/12/25 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
办公室规章制度范本
2015/08/04 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Golang连接并操作MySQL
2022/04/14 MySQL
netty 实现tomcat的示例代码
2022/06/05 Servers