Vue在需要获取分发内容的宽度(内容不换行的情况下)
子组件有默认的内容(即在父组件没有分发内容时也会有内容)例:
<span id="detial">
<slot>这里是子组件默认内容</slot>
</span>
<father>
<son>父组件分发到子组件的内容</son>
</father>
直接在子组件mounted函数中获取时获取不到detial正确的值:
document.getElementById("detial").offsetWidth
此时的offsetWidth为父组件分发内容到子组件之前子组件渲染的内容的宽
若获取父组件分发内容到子组件渲染后的宽度值
this.$nextTick(function(){
})document.getElementById("detial").offsetWidth;
即在渲染完成之后再获取分发槽内容宽度,,此时是正确的宽度