最近專案不忙，看了看vue，看到了slot，練習了下，與大家分享下，希望有用～

個人理解：用法等同於“佔位符”，佔據一定的“位置”，進行不同的回顯，可以設定預設值，效果類似於v-if，但是功能更豐富

slot用法一（基礎用法）

子元件程式碼設定如下：

<template>
    <div>
        <slot>預設</slot>
    </div>
</template>
<script>
export default {
}
</script>

父元件程式碼設定如下：

<template>
    <div class='users'>
        <!-- 放置子元件 -->
        <Child></Child>
    </div>
</template>
<script>
import Child from '../components/child.vue';
export default {
    components:{
        Child
    },
}
</script>
 

頁面回顯如下：

子元件child中新增slot佔位符，設定預設值，在父元件中引用渲染子元件佔位符回顯預設內容；

在父元件中給子元件標籤內寫入內容，案例程式碼如下：

<Child>
    <!-- 寫入內容 -->
    <el-button>
        測試
    </el-button>
</Child>

在寫入一個按鈕節點後，頁面回顯如下：

子節點中的slot內容被父節點內容所替代；

總結：此時slot被作為佔位符所使用，無內容時回顯預設內容，當有內容時回顯內容，效果有點類似於input的placeholder屬性的效果；

slot用法二（多個slot同時使用）

子元件程式碼設定如下：

<template>
    <div>
        <slot>預設</slot>
        <slot>預設</slot>
        <slot>預設</slot>
    </div>
</template>
<script>
export default {
}
</script>

頁面回顯如下：

但是此時控制檯會有如下警告：

來自有道翻譯的解釋：在同一渲染樹中發現的插槽“預設”的重複存在-這可能會導致渲染錯誤。

此時用slot的屬性name來設定額外的插槽；

<template>
    <div>
        <slot name='test1'>預設</slot>
        <slot name='test2'>預設</slot>
        <slot name='test3'>預設</slot>
    </div>
</template>

頁面回顯如下：

這是因為定義了slot的name名稱後在使用時也要新增相應的配置，制定渲染的插槽（sloat標籤）；

父元件程式碼設定如下：

<template>
    <div class='users'>
        <!-- 放置子元件 -->
        <Child>
            <!-- 寫入內容,通過slot屬性指定對應的插槽 -->
            <el-button slot='test2'>
                測試
            </el-button>
        </Child>
    </div>
</template>
<script>
import Child from '../components/child.vue';
export default {
    components:{
        Child
    },
}
</script>

頁面回顯如下：

第二個插槽（slot標籤）被dom節點所覆蓋，第一個和第三個不變；

總結：此時slot被作為可指定的佔位符所使用，slot標籤通過設定name屬性進行區分，在父元件呼叫子元件時通過給子元件設定slot屬性的方法設定作用的slot；

ps：以上就是我對slot的理解，不足之處歡迎評論指正交流～