1.在vue中获取dom推荐使用$refs来获取,可是有时会出现 this.$refs.xxx 为undefined的情况。
  • 场景1:在created()里使用
    在这个生命周期中进行数据观测 ,属性和方法的运算,watch 事件回调。但是页面还没有挂载上去,没有 e l 属 性 , t h i s . el 属性,this. elthis.refs无法调用dom。
    解决办法:换成在mounted()里使用

  • 场景2:父元素或当前元素使用了v-if或v-show
    因为$refs不是响应式的,只在组件渲染完成后才会生效,在初始渲染的时候是不存在的。
    因为是非响应式的,所有动态加载的模板更新它都无法相应的变化。
    解决办法:可以通过setTimeout(()=>{…}, 0)来实现。

2.如果使用v-for 遍历加ref时可以使用 ,即 :ref ="variable" ,这样得到的是不同的ref。
<div v-for="(item,index) in arr" :key="index">
  <child  :ref="`refName${index}`"/>
</div>
//this.$refs[`refName${index}`]每一项都是一个仅包含一个元素的数组
this.$refs[`refName${index}`][0].fun();//调用第一个组件内的方法

但是也可以不使用 ,这时得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

<div v-for="(item,index) in arr" :key="index">
  <child  ref="refName"/>
</div>
//this.$refs.refName是一个包含了对应数据源的这些子组件的数组
this.$refs.refName[0].fun();//调用第一个组件内的方法
Logo

前往低代码交流专区

更多推荐