this.$refs 在 Vue 组件中始终为空或未定义

Question

我是 Vue 的新手，我正在尝试使用 $refs 从兄弟组件中获取 DOM 中的一些元素（出于非常基本的目的，只是为了获得它们的高度等），我正在计算中这样做。

无论我尝试什么， this.$root.$refs 总是返回未定义或作为空对象，我不知道我做错了什么。

在父组件中，我有：

 <template>
<ComponentA />
<ComponentB />
</template>

在组件 AI 中有：

 <template>
  <div id="user-nav">
   <div ref="nav-container">
    <slot />
   </div>
  </div>
</template>

我只是想看看我是否可以通过控制台日志记录在 ComponentB 中访问它

 console.log(this.$root.$refs);

在该组件的已安装功能中。

但我一直得到一个空对象。

你能不能像这样跨兄弟组件访问东西？？？

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

Answer 1

你可能已经解决了这个问题，但只是为了回答这个问题：

我有一个类似的问题，这似乎是因为在 Vue 有时间用它自己的版本替换根 DOM 之前调用函数。要解决此问题，您可以做的是创建一个 mounted 生命周期挂钩并在那里调用该函数。

 const vm = new Vue({
  el: '#app',
  data: {
    sayHi: 'Hello World',
  },
  mounted: function() { // The hook. Here, Vue has already worked its magic.
    console.log('YOUR ELEMENT ----> ', this.doSomething())
  },
  methods: {
    doSomething: function() {
      return this.$refs['nav-container']
    }
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span ref="nav-container">{{ sayHi }}</span>
</div>

我在 这里找到了解决方案。

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