Vue進階（幺貳柒）：Vue插槽

概述

插槽就是子組件中用slot標籤定義的預留位置，可以設置name屬性，也可以不設置name屬性，設置name的叫具名插槽，不設置name的的叫不具名插槽，在父組件中使用子組件時候可以在使用子組件的標籤內通過聲明插槽名或不聲明插槽名的方式往子組件中的具名插槽或者不具名插槽寫入html代碼。

插槽使用的關鍵在於：在父組件中使用子組件標籤的時候可以往子組件內寫入html代碼。

使用步驟

1. 子組件中定義插槽
2. 父組件使用子組件時往插槽寫入代碼

何時使用插槽？

簡單的舉個栗子：有2個組件，父組件father，子組件son。

父組件 father

<template>
    <div>
        <h3>這是父組件</h3>
        <son>實踐slot</son>
    </div>
</template>

子組件 son

<template>
    <div>
        <h4>這是子組件</h4>
        <input type="text" placeholder="請輸入">
    </div>
</template>

一般我們的組件都會怎麼寫，但是這麼寫的話，會發現子組件中的實踐slot是顯示不出來的。如果需要讓他顯示出來，這時我們就可以用到插槽slot了。

如何使用插槽？

首先，子組件中我們要添加插槽slot，

<template>
    <div>
        <h4>這是子組件</h4>
        <input type="text" placeholder="請輸入">
        <slot></slot> 
    </div>
</template>

這時，終於出現了slot。slot的位置就會出現父組件中實踐slot這幾個大字。

可以看到，這裏面slot是沒有名稱的，顧名思義，這是插槽中的默認插槽。

然後在看看具名插槽，直接上代碼。
父組件

<template>
    <div>
        <h3>這是父組件</h3>
        <son><span>實踐slot</span></son>
        <son>
            <template slot="myslot">
                <div>
                    實踐具名slot
                </div>
            </template>
        </son>
    </div>
</template>

子組件

<template>
    <div>
        <h4>這是子組件</h4>
        <input type="text" placeholder="請輸入">
        <slot></slot>
        <slot name="myslot"></slot>
    </div>
</template>

可以看出，和默認插槽不同的是，在子組件中，我們給插槽一個name屬性，這個就是插槽的名稱，同時在父組件中，我們在需要將內容插入的地方標籤上加了一個slot屬性，他的值就是我們的slot 名稱name。

接下來看下slot-scope。
slot-scope是作用域插槽。

官網中有一句特別強調的話：父組件模板的所有東西都會在父級作用域內編譯；子組件模板的所有東西都會在子級作用域內編譯。簡單的說，就是父組件中不能直接用子組件中定義的data數據。而slot-scope的出現就是解決了這樣的問題。

父組件

<template lang="">
    <div>
        <h3>這是父組件</h3>
        <son>
            <template slot="myslot" slot-scope="scope">
                <ul>
                    <li v-for="item in scope.data">
                        {{item}}
                    </li>
                </ul>
            </template>
        </son>
    </div>
</template>

子組件

<template>
    <div>
        <h4>這是子組件</h4>
        <input type="text" placeholder="請輸入">
        <slot name="myslot" :data='list'></slot>
    </div>
</template>
<script>
export default {
    name:'Son',
    data(){
        return{
            list:[
                {name:"Tom",age:15},
                {name:"Jim",age:25},
                {name:"Tony",age:13}
            ]
        }
    }
}
</script>

其中，下方三個對象的值，我們本身是在子組件中定義的，按照官方文檔中說的，本來父組件中是無法顯示出來這些數據的，但是爲什麼現在顯示出來了呢？這就要歸功於我們強大的slot-scope了。

首先，在子組件中的插槽上有一句data=“list”，而在父組件中也有slot-scope=“scope”，slot-scope就是取data的值，slot-scope的值是自定義的，我們可以取任何名稱，但是data的值傳過來時是以對象形式傳輸的，所以在這scope.data纔是list的值。

這樣我們就可以在父組件中取到子組件的值，並且加以應用了。

注

1. 從vue2.6.0開始，slot、slot-scope已經被廢棄，推薦使用v-slot；有關兩者的用法區別，請移步博文《Vue進階（幺貳捌）：Vue插槽：slot、slot-scope與指令v-slot使用方法區別講解》。