Question

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

无论我尝试什么，this.$root.$refs要么总是返回未定义状态，要么返回为空对象，而且我不知道我在做什么错。

在父组件中，我有：

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

在组件A中，我有：

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

我只是尝试查看是否可以通过控制台日志在ComponentB中访问它

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

在该组件的安装函数中。

但是我不断收到一个空对象。

您能不能跨类似的兄弟组件访问内容吗？

Answer 1

您可能已经解决了这个问题，但仅回答以下问题：

我有一个类似的问题，这似乎是因为在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>

我找到了解决方法here.

Answer 2

您可以做到，您的问题是您的父组件上实际上没有任何引用。

我不建议这样做，无论是使用vuex，eventbus还是$ emit

Vue.component('componentA', {
  template: '<div><span ref="ref-inside-a">You\'re in A!</span></div>',
  methods:{
  log(){
  console.log('Hello from a')
  }
  }
})

Vue.component('componentB', {
  props: ['ball'],
  template: '<div><span>This is B!</span></div>',
  mounted() {
    this.$root.$refs['a'].log()    
    console.log(this.$root.$refs['a'].$refs['ref-inside-a'])
  }
})

new Vue({
  el: "#app",
  mounted() {
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a ref="a"></component-a>
  <component-b ref="b"></component-b>

</div>

Answer 3

我有同样的问题。我在计算属性中使用了this.$refs。我只是摆脱了计算的属性和使用的方法，一切都开始正常工作，因为$ refs没有反应，例如here和here

Answer 4

这可能不是您特定问题的答案，但我发现 $refs 为空的另一个原因是定义它的组件尚未创建/安装。可能是由于 Vue 使用的延迟渲染。

我有一组标签，其中一个是我有“ref=”的那个，如果我没有访问那个标签，那么 $refs 是空的。但是如果我第一次访问了该选项卡，那么 ref 设置正确。

Answer 5

在我的具体情况下

this.$refs

部分引用了多个组件。可以通过引用访问特定组件：

this.$refs[componentName]

要访问上面组件的特定字段，我必须选择第一个 observable：

this.$refs[componentName][0].someFieldToBeSelected -> this works
this.$refs[componentName].someFieldToBeSelected -> this fails

.

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

5 个答案: