slot出現的時代背景
有時候，我們會遇到這麼一個問題？
我們引入註冊的元件時，在註冊的元件裡面寫東西，發現東西顯示不出來。這時候，我們就用到了slot。

Slot的通俗理解

是“佔坑”，在元件模板中佔好了位置，當使用該元件標籤時候，元件標籤裡面的內容就會自動填坑（替換元件模板中< slot >位置），當插槽也就是坑< slot name=”mySlot”>有命名時，元件標籤中使用屬性slot=”mySlot”的元素就會替換該對應位置內容；

第一種
我們在父元件中註冊的標籤中寫文字，發現文字並不會出來
例：

<Hello>
        <span >第一個隱藏的內容</span>
        <span style="color:red;">第二個隱藏的內容</span>
    </Hello>
 

這時候，我們在子元件，在後面加上slot中

<div>
       <slot></slot>
</div>

文字就可以顯示出來

第二種

在父元件，註冊的標籤裡用slot屬性
例：

  <Hello>
        <span slot="first">第一個隱藏的內容</span>
        <span slot="second" style="color:red;">第二個隱藏的內容</span>
    </Hello>

在子元件中使用slot標籤上的name屬性
例：

      <div>
        <slot name="second"></slot>
      </div>

這樣會顯示命名父元件slot屬性定義的名字。

第三種
slot標籤相同與微信小程式中的block標籤，不會在頁面中做任何渲染，只接受控制屬性。
我在子元件中設定data資料

  dt: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']

子元件設定slot標籤

<slot v-for="item in dt">{{item}} </slot>
 

父元件中匯入子元件。