以下是再现场景的代码笔: https://codepen.io/anon/pen/vzqgJB
我在vuetify的router-view
中有一个v-app
。
<div id="app">
<v-app>
<v-content>
<v-container>
{{$route.path}}
<router-view/>
</v-container>
</v-content>
</v-app>
</div>
路由配置如下:
const routes = [
{ path: '', component: tabsComponent,
children:[
{ path: '', component: component1 },
{ path: 'component2', component: component2 }
]
},
]
我正在使用Vuetify的v-tabs
组件来呈现2个分别加载component1
和component2
的标签。
var tabsComponent = Vue.component('tabsComponent',{
components:{
component2,
component1
},
name:'tabsComponent',
template: `
<v-tabs>
<v-tab to="/">Tab 1</v-tab>
<v-tab to="/component2">Tab 2</v-tab>
<v-tabs-items>
<v-tab-item id="/">
<component1></component1>
</v-tab-item>
<v-tab-item id="/component2">
<component2></component2>
</v-tab-item>
</v-tabs-items>
</v-tabs>
`,
mounted(){
this.$nextTick(()=>{
console.log("tabs")
console.log(this.$el.offsetWidth)
})
}
})
我面临的问题是,在安装component1
时,this.$el.offsetWidth
返回为0
。
var component1 = Vue.component('component1',{
name: 'component1',
template: `
<v-container fluid>John </v-container>
`,
mounted(){
this.$nextTick(()=>{
console.log("component1")
console.log(this.$el.offsetWidth) // This is printed as 0
})
}
})
即使父组件的offsetWidth不为零,我也无法弄清楚为什么宽度返回为0。 任何帮助将不胜感激。
答案 0 :(得分:1)
mounted
的子组件中的钩子在父项中的安装钩子之前被触发:在子项中安装钩子,在父项中安装钩子,最后渲染为dom。因此,在子组件中,您与渲染之间相差两个勾点。您可以用两个折叠的$nextTick
或setTimeout
来做您想做的事情(setvout回调在vue完成所有工作后得到控制):
mounted(){
this.$nextTick(()=>{
this.$nextTick(()=>{
console.log("component1")
console.log(this.$el.offsetWidth)
})
})
}
或
mounted(){
setTimeout(()=> {
console.log("component1")
console.log(this.$el.offsetWidth)
})
}
来自Vue Parent and Child lifecycle hooks的插图:
更新您的评论:
是的,您无法通过offsetWidth
获得display: none
的无效标签。但是所有制表符的偏移量是否相等?无论如何,您可以动态跟踪活动标签。在v-model
上使用tabsComponent
并添加监视方法,当标签可见时,您可以在其中获取指标。另外,您还应该在组件和内部容器中都添加ref
(通过将组件的引用名称设置为等于Tab路径,您可以使用activeTab
访问活动组件的内部引用)。
在模板中:
<v-container fluid ref="div">John</v-container>
# ...
<div id="component2" ref="div">Jinny</div>
# ...
<v-tabs v-model='activeTab'>
# ...
<component1 ref="/"></component1>
<component2 ref="/jinny"></component2>
在脚本中:
data: function () {
return {
activeTab: null
}
},
watch: {
activeTab: function () {
this.$nextTick(()=> {
console.log(this.$refs[this.activeTab].$refs.div.offsetWidth)
})
}
}
更新了代码笔