使用slot-scope複製vue中slot內容

有時候咱們的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語法可能不太同樣