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祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
解析Python3中的Import
2019/10/13 Python
Python随机数函数代码实例解析
2020/02/09 Python
python绘制动态曲线教程
2020/02/24 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
SQL语言面试题
2013/08/27 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
社区工作者演讲稿
2014/05/23 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
班主任培训研修日志
2015/11/13 职场文书
八年级数学教学反思
2016/02/17 职场文书
python中validators库的使用方法详解
2022/09/23 Python