• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
想出轨逗 显示全部楼层 发表于 2021-10-25 19:50:38 |阅读模式 打印 上一主题 下一主题
在开发过程中,常常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件,并举行相应操纵,但存在取不到元素的情况,其根本缘故原由是由于$refs只能取得mounted(渲染)之后的元素。

比方,在这种情况中,若flag从真值切换到假值取不到节点是正常的,由于v-if假如为假值,那么该节点不会被渲染。
但假如从假值切换到真值时,也大概取不到节点,这是由于渲染须要时间,通常可以使用$nextTick()办理。
  1. ...
  2. <el-table v-if="flag" ref="table">
  3.   <el-table-column prop="prop1"></el-table-column>
  4.   <el-table-column prop="prop2"></el-table-column>
  5. </el-table>
  6. ...
  7. export default {
  8.   methods: {
  9.     this.$refs.table.XXX()
  10.   }
  11. }
复制代码
但存在一个极特殊的情况,第一次页面渲染的时间,$refs也取不到值。这个时间就要考虑v-show举行组件元素的潜伏与展示。
由于v-show是通过css的display:none举行潜伏控制,所以一开始就会渲染,肯定可以或许取到元素
补充:Vue.js中ref ($refs)用法举例总结及应注意的坑
一、根据官方文档总结的用法:

看Vue.js文档中的ref部门,自己总结了下ref的使用方法以便反面查阅。
1、ref使用在表面的组件上
HTML 部门
  1. <div id="ref-outside-component" v-on:click="consoleRef">
  2.   <component-father ref="outsideComponentRef">
  3.   </component-father>
  4.   <p>ref在外面的组件上</p>
  5. </div>
复制代码
js部门
  1. var refoutsidecomponentTem={
  2.     template:"<div class='childComp'><h5>我是子组件</h5></div>"
  3.   };
  4.   var refoutsidecomponent=new Vue({
  5.     el:"#ref-outside-component",
  6.     components:{
  7.       "component-father":refoutsidecomponentTem
  8.     },
  9.     methods:{
  10.       consoleRef:function () {
  11.         console.log(this); // #ref-outside-component   vue实例
  12.         console.log(this.$refs.outsideComponentRef); // div.childComp vue实例
  13.       }
  14.     }
  15.   });
复制代码
2、ref使用在表面的元素上
HTML部门
  1. <!--ref在外面的元素上-->
  2. <div id="ref-outside-dom" v-on:click="consoleRef" >
  3.   <component-father>
  4.   </component-father>
  5.   <p ref="outsideDomRef">ref在外面的元素上</p>
  6. </div>
复制代码
JS部门
  1. var refoutsidedomTem={
  2.     template:"<div class='childComp'><h5>我是子组件</h5></div>"
  3.   };
  4.   var refoutsidedom=new Vue({
  5.     el:"#ref-outside-dom",
  6.     components:{
  7.       "component-father":refoutsidedomTem
  8.     },
  9.     methods:{
  10.       consoleRef:function () {
  11.         console.log(this); // #ref-outside-dom  vue实例
  12.         console.log(this.$refs.outsideDomRef); //  <p> ref在外面的元素上</p>
  13.       }
  14.     }
  15.   });
复制代码
3、ref使用在内里的元素上---局部注册组件
HTML部门
  1. <!--ref在里面的元素上-->
  2. <div id="ref-inside-dom">
  3.   <component-father>
  4.   </component-father>
  5.   <p>ref在里面的元素上</p>
  6. </div>
复制代码
JS部门
  1.   var refinsidedomTem={
  2.     template:"<div class='childComp' v-on:click='consoleRef'>" +
  3.             "<h5 ref='insideDomRef'>我是子组件</h5>" +
  4.          "</div>",
  5.     methods:{
  6.       consoleRef:function () {
  7.         console.log(this); // div.childComp  vue实例
  8.         console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
  9.       }
  10.     }
  11.   };
  12.   var refinsidedom=new Vue({
  13.     el:"#ref-inside-dom",
  14.     components:{
  15.       "component-father":refinsidedomTem
  16.     }
  17.   });
复制代码
4、ref使用在内里的元素上---全局注册组件
HTML部门
  1. <!--ref在里面的元素上--全局注册-->
  2. <div id="ref-inside-dom-all">
  3.   <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
  4. </div>
复制代码
JS部门
  1.   Vue.component("ref-inside-dom-quanjv",{
  2.     template:"<div class='insideFather'> " +
  3.           "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
  4.           " <p>ref在里面的元素上--全局注册 </p> " +
  5.          "</div>",
  6.     methods:{
  7.       showinsideDomRef:function () {
  8.         console.log(this); //这里的this其实还是div.insideFather
  9.         console.log(this.$refs.insideDomRefAll); // <input type="text">
  10.       }
  11.     }
  12.   });
  13.   var refinsidedomall=new Vue({
  14.     el:"#ref-inside-dom-all"
  15.   });
复制代码
二、应注意的坑

1、假如通过v-for 遍历想加差别的ref时记得加 :号,即 :ref =某变量 ;
这点和其他属性一样,假如是固定值就不须要加 :号,假如是变量记得加 :号

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

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

加和不加[0]的区别--睁开了
3、想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$refs. imgLocal2:
  1.     console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
  2.     setTimeout(() => {
  3.      console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
  4.     }, 500); // 不推荐
  5.     this.$nextTick(() => {
  6.      console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
  7.     });
复制代码
以上为个人经验,盼望能给各人一个参考,也盼望各人多多支持脚本之家。如有错误或未考虑完全的地方,望不吝见教。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作