那是因为mounted()
不保证 DOM 已经完成渲染。您需要等待this.$nextTick()
:
mounted() {
this.$nextTick(() => {
console.log(this.$refs.tabsMenu)
});
}
之所以setTimeout(callback, 1)
对你有用是因为你本质上将回调(在你的代码中,访问引用并将其记录到控制台)推迟到调用堆栈的末尾,也就是 DOM 完成渲染的时候。
如果您熟悉使用 async/await,也可以这样做:
async mounted() {
await this.$nextTick();
console.log(this.$refs.tabsMenu);
}
Update: 看来你的ref
元素实际上包含在另一个 VueJS 组件中<baseComponent>
。在这种情况下,听this.$nextTick()
在父/消耗组件上是不够的,因为它不能保证内部组件已安装and呈现。
如果您仍然需要使用这种方法,那么我唯一的建议是确保内部<baseComponent>
当它被安装并且它的 DOM 被渲染时会发出某种事件,例如通过发射ready
event:
// Inside baseComponent
mounted() {
this.$nextTick(() => {
this.$emit('ready');
});
}
然后,在您的父组件中,您可以监听该事件,如下所示:
<baseContainer v-on:ready="onReady">
<ul ref="tabsMenu" id="tabs-menu" class="flex-inline flex w-full">
<li>Home</li>
<!-- many more items -->
<li>Contact</li>
</ul>
</baseContainer>
然后在组件的代码中:
methods {
onReady: function() {
console.log(this.$refs.tabsMenu);
}
}