vue 使用Slot 分發內容 學習總結。

https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分發內容    官方API地址

我對solt的理解是當組件中某一項需要單獨定義，那么就應該使用solt。 舉例說明。例如項目中需要一個模態框提示 付款成功，付款失敗。那么這個模態框也就僅僅差這幾個字或者是狀態圖片而已。那么此時應用solt就是一個非常不錯的選擇。

目錄結構

單個slot

　　除非子組件模板包含至少一個 <slot> 插口，否則父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的 slot 時，父組件整個內容片段將插入到 slot 所在的 DOM 位置，並替換掉 slot 標簽本身。

　　最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

以下代碼為 app.vue文件中的代碼

<template>
  <div id="app">
      <children>
        <span>子組件內部元素</span>
      </children>
  </div>
</template>


<script>
  export default {
    name: 'hello',
    components: {
      children: {
        template: '<div>這里是子組件</div>'
      }
    }
  }
</script>

　　渲染結果為

　　我們發現寫在 children模板內部的span被默認刪除了。如果想讓span顯示那么此刻就應該使用slot。

　　代碼實例：對App.vue的代碼做如下修改

<template>
  <div id="app">
      <children>
        <span>子組件內部元素</span>
      </children>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    components: {
      children: {
        template: '<div><slot><p>默認效果</p></slot>這里是子組件</div>'
      }
    }
  }
</script>

　　

那么此時span標簽的內容就被渲染出來了。如果在childrem中如果不寫span標簽那么slot默認會渲染slot里面的內容

具名slot

　　上面案例中講解的是當組件的模板中有一個slot的方法，那么一個組件中如果想使用多個slot那么此時就應該使用具名slot。

　　<slot> 元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素。

　　仍然可以有一個匿名 slot ，它是默認 slot ，作為找不到匹配的內容片段的備用插槽。如果沒有默認的 slot ，這些找不到匹配的內容片段將被拋棄。

　　代碼實例：修改App.vue的代碼

　　

<template>
  <div id="app">
    <children>
      <div slot="header">
        <ul>
          <li>首頁</li>
          <li>商城</li>
        </ul>
      </div>
      <div>
        這個是默認的沒有具名的solt
      </div>
      <div slot="footer">
          <p>備案號</p>
      </div>
    </children>
  </div>
</template>
<script>
  var Child = {
    template: ' <div>這是子組件<div></div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>'
  }
  export default {
    name: 'hello',
    components: {
      children: Child
    }
  }
</script>

　　渲染結果為