有時候我們的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內容