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 返回 undefined 呢？？即使它明显在那里？？

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，而不是不渲染它。愚蠢的小解决方法。

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://vuejs.org/v2/api/#vm-nextTick 和https://vuejs.org/v2/api/#mounted

Answer 3

主要解决方案是确保您的组件不是动态导入的

您仍然需要避免v-if用this.$refs.mapRefin包装组件并使用in mounted()，而不是created()

我没有使用 Vue Google Maps 插件/组件，而是我自己的自定义组件

方法一

用：

import CustomComponent from './CustomComponent ';

export default {
  components: {
    CustomComponent,
  },
  ...
}

代替

export default {
  components: {
    CustomComponent: () => import('./CustomComponent'),
  },
  ...
}

方法二

使用this.$refs.mapRefinmounted()而不是created()。

通过这种方式，setTimeout()而this.$nextTick()不是需要

正确做法：

import CustomComponent from './CustomComponent ';

export default {
  components: {
    CustomComponent,
  },
  ...
}

错误的方法：

export default {
  components: {
    CustomComponent: () => import('./CustomComponent'),
  },
  ...
}

方法三

不要使用 包装子组件v-if，v-show而是使用。

正确做法：

mounted(){
  //works! child components were loaded
  console.log(this.$refs.mapRef) 
}

错误的方法：

created(){
  //DON'T DO THIS! child components hasn't loaded
  console.log(this.$refs.mapRef) 

  //might work but it's an unreliable workaround
  setTimeout(()=>{
    console.log(this.$refs.mapRef)
  }, 0);

  //might work but it's an unreliable workaround
  this.$nextTick(()=>{
    console.log(this.$refs.mapRef)
  });

}

其他方法（不合适且不是解决方案）

以下是我尝试过的方法，但直到我使用了上面的方法（停止使用动态导入）才起作用

我已经把this.$refs.mapRef在mounted()试图用其包装setTimeout()和2层this.$nextTick()。

它仅适用于热重载，但在页面刷新后不再有效

mounted(){
  setTimeout(()=>{
    this.$nextTick(()=>{
      this.$nextTick(()=>{
        console.log(this.$refs.mapRef) // returns undefined
      });
    });
  }, 0);
}

感谢另一个答案中的评论： How to access to a child method from the parent in vue.js