时间戳

首页 > 解决方案 > this.$refs 在 Vue 组件中始终为空或未定义

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

问题描述

我是 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);

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

但我不断得到一个空对象。

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

标签： javascriptvue.jsref

解决方案

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

我遇到了类似的问题，这似乎是因为在 Vue 有时间用自己的版本替换根 DOM 之前调用了该函数。你可以做些什么来解决这个问题是创建一个mounted生命周期钩子并在那里调用函数。

const vm = new Vue({
  el: '#app',
  data: {
    sayHi: 'Ello 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>

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

推荐阅读