使用slot-scope復制vue中slot內容
阿新 • • 發佈:2018-11-03
slot for code scope sel vnode 語法 http wid
有時候我們的vue組件需要復制使用者傳遞的內容。
比如我們工程裏面的輪播組件需要使用復制的slot來達到循環滾動的效果
使用者關註輪播內容的靜態效果,組件負責讓其滾動起來
組件: <div class="horse-lamp"> <div class="lamp"> <slot name="lamps"></slot> </div> <div class="lamp"> <slot name="lamps"></slot> </div> </div> 使用者: <CarouselWidget> <div slot="lamps">123</div> </CarouselWidget>
這種實現方式對於初始化的數據是沒問題的,但是不支持slot內容的動態綁定,這是因為
- vnode在vue中是唯一的
- 一個vnode只會和一個dom節點綁定
因此當組件使用者在聲明節點時,因為只聲明了一個div,後臺只生成了1個vnode,最終雖然產生了2個div,但是vnode只和後面1個dom綁定了,當vnode修改時也只會修改1個dom
解法:slot-scope
使用slot-scope數據產生的每個slot都會產生一個新的vnode
組件: <div class="horse-lamp"> <div class="lamp"> <slot name="lamps" :arr="arr"></slot> </div> <div class="lamp"> <slot name="lamps" :arr="arr"></slot> </div> </div> 使用者: <CarouselWidget :arr="info.column"> <template scope="slotProps" slot="lamps"> <component v-for="(item, index) in slotProps.arr" :key="info.id" :is="templates[item.type]" :item="item" ></component> </template> </CarouselWidget>
這種情況下component內容有改動,那麽組件內容2個slot都會同步更新
項目使用的vue版本是2.4.2,更高級的vue的slot-scope語法可能不太一樣
原文地址:https://segmentfault.com/a/1190000016747615
使用slot-scope復制vue中slot內容