最近忙著寫一些組件解愤，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope训唱，然后看了一下文檔的更新尝偎，于是又重新把“插槽”學(xué)習(xí)了一篇国夜，下面一段是文檔中的說明:
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即
v-slot指令)厦凤。它取代了slot和slot-scope這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性鼻吮。新語法的由來可查閱這份 RFC。
插槽较鼓，也就是slot椎木，slot就是子組件里的一個(gè)占位符违柏，一個(gè)slot的核心問題，就是顯不顯示香椎，顯示的話顯示話漱竖，該如何去展示出來，這是由父組件所控制的畜伐，但是插槽顯示的位置是由子組件自己所決定的馍惹，slot寫在組件template的什么位置，父組件傳過來的模板將會(huì)顯示在什么位置玛界。
插槽的基本使用方法(匿名插槽)
這是一個(gè)子組件讼积，我們使用了默認(rèn)插槽(匿名插槽)，父組件的內(nèi)容將會(huì)代替<slot></slot>顯示出來
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'children'
}
</script>
// 使用children組件
<children>代替slot的內(nèi)容</children>
渲染后的結(jié)果
<template>
<div>
代替slot的內(nèi)容
</div>
</template>
具名插槽
自 2.6.0 起有所更新脚仔。已廢棄的使用
slot特性的語法在這里勤众。
有時(shí)我們一個(gè)組件里面需要多個(gè)插槽。我們?cè)趺磥韰^(qū)分多個(gè)slot鲤脏，而且不同slot的顯示位置也是有差異的.對(duì)于這樣的情況们颜，<slot> 元素有一個(gè)特殊的特性：name。這個(gè)特性可以用來定義額外的插槽：
- 注意:一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”猎醇。
如下面一個(gè)組件,需要多個(gè)插槽窥突。如何向組件提供內(nèi)容呢？
<template>
<div>
<header>
<slot name="header"></slot>
<slot></slot>
</header>
<main>
<slot></slot>
</main>
</div>
</template>
在向具名插槽提供內(nèi)容的時(shí)候硫嘶，我們可以在一個(gè) <template> 元素上使用 v-slot 指令阻问，并以 v-slot 的參數(shù)的形式提供其名稱:
<!-- old -->
<children>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<template slot="default">
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
</children>
<!-- new -->
<children>
<template v-slot:header>
<!-- <template #header> 具名插槽可縮寫形式 -->
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
</children>
渲染后的結(jié)果
<template>
<div>
<header>
<h1>Here might be a page title</h1>
</header>
<main>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</main>
</div>
</template>
注意:
v-slot只能添加在一個(gè)<template>上 (只有一種例外情況)，這一點(diǎn)和已經(jīng)廢棄的slot特性不同沦疾。例外情況: 當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)称近，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在組件上：
作用域插槽
自 2.6.0 起有所更新哮塞。已廢棄的使用
slot-scope特性的語法在這里刨秆。
有時(shí)候，插槽的內(nèi)容中有需要訪問到子組件里面的內(nèi)容忆畅，類似子組件里的slot可以綁定一些當(dāng)前作用域衡未，從而傳出來，使用組件時(shí)家凯，插槽的內(nèi)容就可以拿到slot傳出來的數(shù)據(jù),父級(jí)的插槽內(nèi)容可用缓醋。
如下，讓后備內(nèi)容（slot默認(rèn)內(nèi)容）user.firstName 替換正常情況下的user.lastName
<span>
<slot>
{{ user.lastName}}
</slot>
</span>
綁定在 <slot> 元素上的特性被稱為插槽 prop“砘澹現(xiàn)在在父級(jí)作用域中送粱，我們可以給 v-slot 帶一個(gè)值來定義我們提供的插槽 prop 的名字：
// slot綁定了當(dāng)前作用域下user對(duì)象
// 為什slot中還有內(nèi)容呢？不是由插槽內(nèi)容填充嗎驯镊？在slot中有內(nèi)容葫督，我們可以稱之為后備內(nèi)容，
就是slot的默認(rèn)內(nèi)容板惑，但我們使用這個(gè)插槽時(shí)橄镜，卻沒有內(nèi)容填充，就會(huì)顯示其默認(rèn)的內(nèi)容冯乘。
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
在父級(jí)作用域中洽胶，我們可以給 v-slot 帶一個(gè)值來定義我們提供的插槽 prop 的名字,slotProps可以任意命名的，通過slotProps.use就拿到了子組件slot傳出來的對(duì)象裆馒。
<!-- old -->
<children>
<template slot="default" slot-scope="slotProps">
{{ slotProps.user.firstName }}
</template>
</children>
<!-- new -->
<children>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</children>
在上述情況下姊氓，當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)，這樣我們就可以把 v-slot 直接用在組件上：
<children v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</children>
// default可以省略,默認(rèn)插槽的縮寫語法
<children v-slot="slotProps">
{{ slotProps.user.firstName }}
</children>
<!-- 解構(gòu)插槽 prop -->
<childrenv-slot="{ user }">
{{ user.firstName }}
</children>
<!-- user 重命名為 person-->
<childrenv-slot="{ user: person}">
{{ person.firstName }}
</children>
- 注意:默認(rèn)插槽的縮寫語法不能和具名插槽混用喷好，因?yàn)樗鼤?huì)導(dǎo)致作用域不明確,只要出現(xiàn)多個(gè)插槽翔横，請(qǐng)始終為所有的插槽使用完整的基于 <template> 的語法
后備內(nèi)容
什么是后備內(nèi)容呢，一個(gè)slot有它的默認(rèn)的內(nèi)容梗搅，有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的禾唁，它只會(huì)在沒有提供內(nèi)容的時(shí)候被渲染。
總結(jié)
這里只是簡(jiǎn)單描述了幾個(gè)關(guān)鍵點(diǎn)无切，其實(shí)還有很多可擴(kuò)展的荡短，或其他特性，我們還是需要多去看文檔哆键，多學(xué)習(xí)掘托。
