1.slot插槽內容分發

在vue專案開發過程中經常遇到這樣的情況：很多元件或者模組的結構相同，只不過是部分內容稍有不同。這種情況下，每次編寫相似的程式碼不僅會增大工作量，還會讓程式碼變得臃腫和冗餘。

slot便是一種用來解決這種情況的簡潔方案，話不多說，上程式碼

父元件：test-slot.vue

<template>
  <div class="test-slot">
      <slot-children>
        <div slot="header">
          替換了name="header"的slot
        </div>
        <div>
          替換沒有name的slot（在未具名的slot只有一個時才能替換）
        </div>
      </slot-children>
  </div>
</template>

<script>
import SlotChildren from '@/components/slot-children'
export default {
  data () {
    return {
    }
  },
  components: {
    SlotChildren
  }
}

</script>
<style lang="less" scoped>
</style>
 

子元件：slot-children.vue

<template>
  <div class="slot-children">
      <div>這是通用的內容，不會被替換</div>
      <slot name="header">這句話不顯示，會被父元件name相同的內容替換</slot>
      <slot>這句話不顯示，會被父元件沒有指定name的內容替換</slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}

</script>
<style lang="less" scoped>
</style>
 

這裡的子元件即相似的元件，裡面需要被替換的內容使用slot標籤包裹，在父元件中不同的呼叫可以插入不同的內容；

父元件可以使用slot屬性指定替換的子元件中相應的slot