我是 Vue 的新手，正在尝试使用 $refs 从同级组件中获取 DOM 中的一些元素(出于非常基本的目的，只是为了获得它们的高度等(，我正在计算中这样做。
无论我尝试什么，this.$root.$refs要么总是未定义，要么作为一个空对象返回，我不知道我做错了什么。
在父组件中，我有：
<template>
<ComponentA />
<ComponentB />
</template>
在组件 A 中，我有：
<template>
<div id="user-nav">
<div ref="nav-container">
<slot />
</div>
</div>
</template>
我只是尝试查看我是否可以通过控制台日志记录在组件 B 中访问它
console.log(this.$root.$refs);
在该组件的挂载函数中。
但我不断得到一个空对象。
您不能像这样跨同级组件访问事物吗???
你可能已经解决了这个问题，但只是为了回答这个问题 问：
我遇到了类似的问题，似乎发生这种情况是因为在 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>我在这里找到了解决方案。
我遇到了同样的问题。我在计算属性中使用this.$refs。我刚刚摆脱了计算属性和使用的方法，一切都开始正常工作，因为$refs不是反应性的，例如这里和这里提到
这可能不是您特定问题的答案，但我发现$refs为空的另一个原因是定义它的组件尚未创建/挂载。可能是由于 Vue 使用的惰性渲染。
我有一组选项卡，其中一个是我有一个"ref="的选项卡，如果我不访问该选项卡，那么$refs是空的。但是如果我第一次访问了该选项卡，则 ref 设置正确。
你可以这样做，你遇到的问题是你的父组件实际上没有任何引用。
无论如何，我不建议使用vuex，事件总线或$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>我遇到了同样的问题，但原因是另一个问题：
我对引用的元素有一个v-if条件。因此，在安装时，该元素未呈现，因为条件仍然为假。
经过3个小时的寻找问题的原因，它是如此明显。
<template>
<sub-component v-if="showCondition" ref="componentName">
<div>someContent</div>
<div>someMoreContent</div>
</sub-component>
</template>
<script lang="ts">
export default class MyComponent extends Vue {
private showCondition = false; // set to true after a REST request
mounted() {
console.log(this.$refs); // this was empty
}
}
</script>
这个问题可以通过将 v-if 移动到引用组件内的附加模板元素来解决。
<template>
<sub-component ref="componentName">
<template v-if="showCondition">
<div>someContent</div>
<div>someMoreContent</div>
</template>
</sub-component>
</template>
<script lang="ts">
export default class MyComponent extends Vue {
mounted() {
console.log(this.$refs); // now 'componentName' is available
}
}
</script>
1-mounted钩子在里面methods这是最糟糕的错字
2- ref 在一个 v-for 循环内，如果没有启动 for 循环，就无法真正初始化，在我的情况下，for 循环数组为空
在我的特定情况下
this.$refs
部件引用到多个组件。可以通过引用访问特定组件：
this.$refs[componentName]
要访问上述组件的特定字段，我必须选择第一个可观察量：
this.$refs[componentName][0].someFieldToBeSelected -> this works
this.$refs[componentName].someFieldToBeSelected -> this fails
.