Vue.js refs 是未定义的，即使 this.$refs 显示它们在那里

Question

我有一个组件的引用

<Gmap ref="mapRef">

在安装中我正在这样做，以查看对象是否可用

mounted(){
    let self = this
    console.log(self.$refs) // Shows the mapRef object reference
    console.log(self.$refs.mapRef) // returns undefined ???
}

self.$refs 显示…

   mapRef: VueComponent {_uid: 207, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

那么为什么 self.$refs.mapRef 返回未定义？即使它显然在那里？？

原文由 Kylie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过使用 v-show 而不是 v-if 解决了这个问题。

我有一个 v-if 语句中的组件。

  <div v-if="!isLoading">
   <GMap ref="mapRef" />
 </div>

我只是将其更改为 v-show

 <div v-show="!isLoading">
   <GMap ref="mapRef" />
 </div>

现在该对象在mounted() 中可用。仍然觉得很奇怪，console.log(this.\(refs) 显示它可以作为 this.\)refs 上的键使用，即使它实际上不是？那是奇怪的行为。

另一个奇怪的事情是，即使我尝试在我的数据加载部分访问 this.$refs.mapRef，在加载数据之后（即在 isLoading=false 之后），我仍然无法访问它。即使那样，它应该已经可用，因为 v-if 通过了。

所以 v-show 通过隐藏 div 而不是不渲染它来解决它。愚蠢的小解决方法。

原文由 Kylie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在获取传单地图实例的引用时遇到了类似的问题，请尝试等待“nextTick”

 mounted(){
  this.$nextTick(()=>{
    let self = this
    console.log(self.$refs) // Shows the mapRef object reference
    console.log(self.$refs.mapRef) // returns undefined ???
  });
}

有关更多信息，请参阅文档 - https://v2.vuejs.org/v2/api/#vm-nextTick 和 https://v2.vuejs.org/v2/api/#mounted

原文由 chrismarx 发布，翻译遵循 CC BY-SA 4.0 许可协议