ref引用组件的问题?

作者站长头像
站长
· 阅读数 19
<tmap-map
      class="standard-map"
      mapKey="mapKey"
      :events="events"
      :center="myLocation"
      :zoom="zoom"
      :doubleClickZoom="doubleClickZoom"
      :control="control"
      >
        <tmap-multi-marker
          id="editable"
          :styles="markerStyles"
          :geometries="editableMarkerGeometries"
          ref="editableRef"
        />
</tmap-map>
const editableRef = ref(null)
onMounted(() => {
  console.log(editableRef.value) // null
})

tmap-map 是一个腾讯地图的 vue 库。在使用时,我尝试在 onMounted 中读取 ref 指向的组件,但是读取到的是 null。如果我用 setTimeout 稍微延迟一点就可以读取到对应的组件。关于这个问题我也可以通过 :ref="(el) => {}" 的方式解决。但是我不太明白,为什么在 onMounted 时会无法读取到对应的组件。我测试过子组件的 onMounted 会比父组件的 onMounted 提前执行,也就是父组件的 onMounted 执行时,子组件的应该已经渲染完毕了。我也在其他组件中使用 onMounted 来获取组件,暂时也没有发现类似的问题。

回复
1个回答
avatar
test
2024-07-20

answer image这是tmap-map组件里的render函数,可以看到在渲染slot时依赖于组件内部的map这个data,而这个map一开始是null,在onMounted里等待SDK加载完成才初始化,所以有延迟answer imageanswer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容