Vue中的slot

slot即「插槽」，插槽會在子組件須要的位置插入須要的內容，插槽的顯示和內容等均由父組件控制。slot很是實用，它使vue中父子組件代碼更加靈活，在不少使用場景下都能發揮不錯的效果。

使用方法

默認使用

先看示例：

這是子組件

    <template id="son">
        <div>
            <h2>我是兒子</h2>
            <slot></slot>
        </div>
    </template>
複製代碼

這是父組件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p>插槽</p>
        </son>
    </div>
複製代碼

最後的顯示效果爲：

插槽能夠理解爲提早在子組件中挖個坑，而後經過父組件對填入坑的內容物進行相關配置與控制，使其顯示咱們須要的結果。

具名插槽

顧名思義，具名插槽即有名字的slot，具名插槽讓子組件能夠高度定製化，它使得能夠在子組件中加入多個slot而且可以重複調用。

仍是看示例：

這是子組件

<template id="son">
        <div>
            <h2>我是兒子</h2>
            <slot name="a"></slot>
            <slot name="b"></slot>
            <slot name="a"></slot>
        </div>
</template>
複製代碼

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <p slot="a">a</p>
            <p slot="b">b</p>
        </son>
</div>
複製代碼

運行結果是這樣：

插槽依據名字填入內容物，使用起來很是方便靈活：

做用域插槽

做用域插槽能夠在插槽上攜帶數據，看示例比較好理解：

這是子組件

    <template id="son">
        <div>
            <h2>我是兒子</h2>
            <slot :data="num"></slot>
        </div>
    </template>
複製代碼

子組件中有一些數據

let son = {
        template: "#son",
        props: {
            fatherstr: {
                type: Number
            }
        },
        data() {
            return {
                num: [1, 2, 3]
            }
        },
    }
複製代碼

這是父組件

<div id="app">
        <h1>我是爸爸</h1>
        <son>
            <div slot-scope="num">
                <div v-for="i in num.data">
                    {{i}}
                </div>
            </div>
        </son>
    </div>
複製代碼

運行效果這樣：

結束

本文是學習過程當中的小小總結，但願有所幫助。