Vue獲取分發內容的寬度

2021-08-10 20:21:53 字數 466 閱讀 2180

vue在需要獲取分發內容的寬度(內容不換行的情況下)

子元件有預設的內容(即在父元件沒有分發內容時也會有內容)例:

這裡是子元件預設內容

父元件分發到子元件的內容

直接在子元件mounted函式中獲取時獲取不到detial正確的值:

document.getelementbyid("detial").offsetwidth
此時的offsetwidth為父元件分發內容到子元件之前子元件渲染的內容的寬

若獲取父元件分發內容到子元件渲染後的寬度值

this.$nexttick(function())

即在渲染完成之後再獲取分發槽內容寬度,,此時是正確的寬度

玩轉vue的slot內容分發

單個slot 在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代...

玩轉vue的slot內容分發

單個slot 在children這個標籤裡面放dom,vue不會理你,也就是不會顯示,類似react this.props.children。父 12345 這邊不會顯示 子components 你需要寫成這樣 children 注意這邊 slot 相當於乙個坑,等著父元件給填上,這邊 slot 代...

Vue之slot內容分發

內容分發,使用特殊的元素作為原始內容的插槽,假設父元件需要在子元件內讓一些dom,那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示,就是slot分發負責的活。可以將父元件放在子元件的內容,放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...