關於做用域插槽的理解

插槽<slot>不難理解，就是子組件提供了可替換模板，父組件能夠更換模板的內容。
具名插槽，讓子組件內能夠提供多個插槽，父組件就能夠對應替換多塊的內容。
做用域插槽理解起來比較難，官方文檔比較簡單，網上又實在沒有找到很好的解釋，做爲初學者我花了點時間，這裏分享一下個人理解，也方便本身記憶。

做用域插槽表明性的例子就是列表組件，一個列表組件，寫一個props接收數據，而後組織好ul、li標籤，寫好樣式，就像這樣

<template>
    <div>
        <ul>
            <li v-for="(item,index) in items">{{index+1}}、《{{item.name}}》{{item.author}}</li>
        </ul>
    </div>
</template>

<script>
export default{
    name: 'child',
    props: {
        items: {
            type: Array
        }
    }
}
</script>

父組件只須要傳入數據便可

<template>
    <div v-cloak>
        <child :items="books"></child>
    </div>
</template>

<script>
import child from './child';
export default{
    name: 'father',
    data(){
        return{
            books: [
                {
                    name: '三體',
                    author: '劉慈欣'
                },
                {
                    name: '解憂雜貨店',
                    author: '東野圭吾'
                },
                {
                    name: '愛與寂寞',
                    author: '吉杜·克里希那穆提'
                }
            ]
        }
    },
    components: {
        child
    }
};
</script>

生成的效果就是這樣的

在其它地方使用這個子組件，生成的效果樣式是同樣的，若是但願在另外一個父組件下有不同的樣式，這個子組件是無法作到的。例如我想讓其在另外一父組件下時，序號是紅色，書名要加粗，做者名字是斜體。
讓咱們修改一會兒組件：

<template>
    <div>
        <ul>
            <slot v-for="(item,index) in items" :index="index" :title="item.name" :author="item.author">
                <li>{{index+1}}、《{{item.name}}》{{item.author}}</li>
            </slot>
        </ul>
    </div>
</template>

原來的<li>用插槽<slot>包起來，v-for也與<slot>綁定， 在沒有父組件插入內容的狀況下默認顯示這裏<li>的內容。在<slot>上使用v-bind，將index、name、author動態數據傳入插槽。
這時父組件這樣寫：

<template>
    <div v-cloak>
        <child :books="books">
            <template slot-scope="child">
                <li><span style="color:red">{{child.index+1}}、</span><b>《{{child.title}}》</b><i>{{child.author}}</i></li>
            </template>
        </child>
    </div>
</template>

最裏面的template標籤至關於父組件從新定義的模板， 經過child這個臨時變量，訪問插槽裏的子組件傳入的數據，最後生成的效果：

最後總結一下，做用域插槽給了子組件將數據返給父組件的能力，子組件同樣能夠複用，同時父組件也能夠從新組織內容和樣式