Slot的通俗理解

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

Slot使用
1、元件中有單個或多個未命名slot標籤時，如下：
<Child><span style=”color:red;”>hello world</span></Child>   

<template>    

  <div>

<slot></slot>

<slot  style=”color:blue;” >這是在slot上添加了樣式</slot>

<slot  name=”mySlot”>這是擁有命名的slot的預設內容</slot>

</div>

</template>

會輸出：兩個紅色的hello world，以及一個使用slot的預設內容

注意：在slot標籤新增樣式無效。擁有命名的插槽不能被不含slot屬性的標籤內容替換，會顯示slot的預設值（具名slot具有對應性）；

2、元件中有多個命名的slot插槽時，可以實現父元件對子元件的指定位置顯示內容或傳參，如下：

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">{{otherData}}</span>

</Child>

<template>

<div>

<slot  name=”header”>這是擁有命名的slot的預設內容</slot>

<slot  name=”main”>這是擁有命名的slot的預設內容</slot>

<slot  name=”footer”>這是擁有命名的slot的預設內容</slot>

<slot  name=”other”>這是擁有命名的slot的預設內容</slot>

</div>

</template>

3、作用域插槽！！：
使用時候子元件標籤<Child>中要有<template scope=”scopeName”>標籤，再通過scopeName.childProp就可以呼叫子元件模板中的childProp繫結的資料，所以作用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中無法訪問child資料的去問題；

作用域插槽代表性的用例是列表元件，允許在parent父元件上對列表項進行自定義顯示，如下該items的所有列表項都可以通過slot定義後傳遞給父元件使用，也就是說資料是相同的，不同的場景頁面可以有不同的展示方式：

   <ul>

      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

         slot的預設內容

      </slot>

   </ul>

   <Child>

      <template slot="item" scope="props">

        <li>{{props.myname}}</li>

      </template>

   </Child>