vue中的插槽，指的是子組件中提供給父組件使用的一個(gè)占位符；
用便簽表示，父組件可以在這個(gè)占位符中填充任何模板代碼，比如HTML,組件等，填充的內(nèi)容會(huì)替換掉子組件的標(biāo)簽(替換占位符)
vue中有三種插槽:
1.默認(rèn)插槽，語法"<slot></slot>";
2.具名插槽，語法"<slot name="名字"></slot";
3.作用域插槽，語法"<slot "自定義name=data中的屬性或?qū)ο?gt;</slot>".
默認(rèn)插槽
默認(rèn)插槽是最簡(jiǎn)單的一種插槽，和上面的描述一致，就是通過替換占位符達(dá)到在父組件中更改子組件中內(nèi)容的效果。
語法:<slot></slot>
在子組件中放置一個(gè)占位符

<template>
   <span>
        <span>圖圖要吃肉肉</span>
        <slot></slot>
   </span>
</template>
<script>
    export default {
    name: 'chassList'
}
</script>

然后在父組件中引入這個(gè)子組件，并給占位符(slot)填充內(nèi)容

<template>
   <div>
        <span>今天吃啥</span>
        <chassList>
               <span>媽媽不讓圖圖吃肉</span>
        </chassList>
   </div>
</template>

這時(shí)頁面展現(xiàn)的內(nèi)容會(huì)是【今天吃啥：圖圖要吃肉肉媽媽不讓圖圖吃肉】。
具名插槽
比如在子組件中有兩個(gè)要替換占位符的地方(兩個(gè)slot),這時(shí)父組件如果要將相應(yīng)的內(nèi)容填充到相應(yīng)的插槽中，靠默認(rèn)插槽是沒有辦法判斷相應(yīng)的內(nèi)容要填充到哪個(gè)插槽中的，為了應(yīng)對(duì)這樣的場(chǎng)景，具名插槽應(yīng)運(yùn)而生。
具名插槽，其實(shí)就是給子組件中的插槽去一個(gè)名字，而父組件就可以在引用子組件的時(shí)候，根據(jù)這個(gè)名字對(duì)號(hào)入座，將相應(yīng)內(nèi)容填充到對(duì)應(yīng)的插槽中。
語法:<slot name="名稱"></slot>
在子組件中放置兩個(gè)具名插槽

<template>
    <div>
        <span>第一個(gè)插槽</span>
        <slot name="one"></slot>
        <span>第二個(gè)插槽</span>
        <slot name="two"></slot>
    </div>
</template>
<script>
export default {
    name: 'chassList'
}
</script>

在父組件引用該子組件，并通過v-slot:[name]的方式將對(duì)應(yīng)的內(nèi)容填充到相應(yīng)的插槽中:

<template>
    <div>
        <span>兩個(gè)插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

這時(shí)頁面展示的內(nèi)容會(huì)是【兩個(gè)插槽：第一個(gè)插槽one，第二個(gè)插槽two】。
作用域插槽
作用域插槽相比于前面的默認(rèn)插槽和具名插槽，會(huì)比較難于理解和運(yùn)用。
前面的兩個(gè)插槽強(qiáng)調(diào)的是填充占位的【位置】；
作用域插槽強(qiáng)調(diào)的則是數(shù)據(jù)作用的【范圍】；
作用域插槽，就是帶參數(shù)（數(shù)據(jù)）的插槽；
在子組件的插槽中帶入?yún)?shù)（數(shù)據(jù)）提供給父組件使用，該參數(shù)（數(shù)據(jù)）僅在插槽內(nèi)有效，父組件可以根據(jù)子組件中傳過來的插槽參數(shù)（數(shù)據(jù)）對(duì)展示內(nèi)容進(jìn)行定制。
語法：<slot :自定義name=data中的屬性或?qū)ο?gt;</slot>
在子組件中放置一個(gè)帶參數(shù)（數(shù)據(jù)）的插槽：

<template>
    <div>
        <span>插槽中的參數(shù)值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>
<script>
export default {
    name: 'classList',
    data() {
        return {
            isAllwo: {
                one: 'one',
                two: 'two'
            }　　
        }
    }
}
</script>

在父組件中引入該子組件，并通過slot-scope來接受子組件中的插槽中傳過來的參數(shù)和使用該數(shù)據(jù)

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

這時(shí)頁面展示的內(nèi)容是【作用域插槽:插槽中的參數(shù)值是one】.
應(yīng)為在template的{{}}支持表達(dá)式，這個(gè)時(shí)候可以利用子組件傳過來的參數(shù)值得不同進(jìn)行頁面內(nèi)容的定制

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one||'空值'}}
            </template>
        </classList>
    </div>
</template>

這時(shí)，如果子組件中傳過來的參數(shù)是空值，頁面的展示內(nèi)容就會(huì)是【作用域插槽：插槽中參數(shù)值是空值】。
作用域插槽的使用場(chǎng)景多種多樣，在各種框架中的應(yīng)用也是十分廣泛，比如ElementUI中的對(duì)表格的某一行或某一列進(jìn)行展示內(nèi)容的定制，就是作用域插槽的一個(gè)典型應(yīng)用場(chǎng)景。