Vue插槽原理與用法詳解
1 插槽內(nèi)容
Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 基于當(dāng)前的?Web Components 規(guī)范草案，將?<slot>?元素作為承載分發(fā)內(nèi)容的出口。
它允許你像這樣合成組件：
<div id="app1">??<navigation-link url="/profile">????Your Profile??</navigation-link></div>然后你在?<navigation-link>?的模板中可能會寫為：
Vue.component('navigation-link', {????template: `??????<a????????v-bind:href="url" rel="external nofollow"????????class="nav-link"??????>??????<slot></slot>??????</a>????`??});當(dāng)組件渲染的時候，這個?<slot>?元素將會被替換為“Your Profile”。
插槽內(nèi)可以包含任何模板代碼，包括 HTML：
<navigation-link url="/profile">?<!-- 添加一個 Font Awesome 圖標(biāo) -->?<span class="fa fa-user"></span>?Your Profile</navigation-link>甚至其它的組件：
<navigation-link url="/profile">?<!-- 添加一個圖標(biāo)的組件 -->?<font-awesome-icon name="user"></font-awesome-icon>?Your Profile</navigation-link>如果?<navigation-link>?沒有包含一個?<slot>?元素，則任何傳入它的內(nèi)容都會被拋棄。
2 具名插槽
有些時候我們需要多個插槽。例如，一個假設(shè)的?<base-layout>?組件多模板如下：
<div class="container">?<header>??<!-- 我們希望把頁頭放這里 -->?</header>?<main>??<!-- 我們希望把主要內(nèi)容放這里 -->?</main>?<footer>??<!-- 我們希望把頁腳放這里 -->?</footer></div>對于這樣的情況，<slot>?元素有一個特殊的特性：name。這個特性可以用來定義額外的插槽：
<div class="container">?<header>??<slot name="header"></slot>?</header>?<main>??<slot></slot>?</main>?<footer>??<slot name="footer"></slot>?</footer></div>在向具名插槽提供內(nèi)容的時候，我們可以在一個父組件的?<template>?元素上使用?slot?特性：
<base-layout>?<template slot="header">??<h1>Here might be a page title</h1>?</template>?<p>A paragraph for the main content.</p>?<p>And another one.</p>?<template slot="footer">??<p>Here's some contact info</p>?</template></base-layout>另一種 slot 特性的用法是直接用在一個普通的元素上：
<base-layout>?<h1 slot="header">Here might be a page title</h1>?<p>A paragraph for the main content.</p>?<p>And another one.</p>?<p slot="footer">Here's some contact info</p></base-layout>我們還是可以保留一個未命名插槽，這個插槽是默認(rèn)插槽，也就是說它會作為所有未匹配到插槽的內(nèi)容的統(tǒng)一出口。上述兩個示例渲染出來的 HTML 都將會是：
<div class="container">?<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>?<footer>??<p>Here's some contact info</p>?</footer></div>3 默認(rèn)插槽的內(nèi)容
有的時候?yàn)椴宀厶峁┠J(rèn)的內(nèi)容是很有用的。例如，一個?<submit-button>?組件可能希望這個按鈕的默認(rèn)內(nèi)容是“Submit”，但是同時允許用戶覆寫為“Save”、“Upload”或別的內(nèi)容。
你可以在?<slot>?標(biāo)簽內(nèi)部指定默認(rèn)的內(nèi)容來做到這一點(diǎn)。
<button type="submit">?<slot>Submit</slot></button>如果父組件為這個插槽提供了內(nèi)容，則默認(rèn)的內(nèi)容會被替換掉。
4 編譯作用域
當(dāng)你想在插槽內(nèi)使用數(shù)據(jù)時，例如：
<navigation-link url="/profile">?Logged in as {{ user.name }}</navigation-link>該插槽可以訪問跟這個模板的其它地方相同的實(shí)例屬性 (也就是說“作用域”是相同的)。但這個插槽不能訪問?<navigation-link>?的作用域。例如嘗試訪問 url 是不會工作的。牢記一條準(zhǔn)則：
父組件模板的所有東西都會在父級作用域內(nèi)編譯；子組件模板的所有東西都會在子級作用域內(nèi)編譯。
5 作用域插槽
2.1.0+ 新增
有的時候你希望提供的組件帶有一個可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽。例如一個簡單的?<todo-list>?組件的模板可能包含了如下代碼：
Vue.component('todo-list',{????template:`????<ul>??????<li????????v-for="todo in todos"????????v-bind:key="todo.id">????????{{ todo.text }}??????</li>????</ul>????`??});但是在我們應(yīng)用的某些部分，我們希望每個獨(dú)立的待辦項渲染出和 todo.text 不太一樣的東西。這也是作用域插槽的用武之地。
為了讓這個特性成為可能，你需要做的全部事情就是將待辦項內(nèi)容包裹在一個?<slot>?元素上，然后將所有和其上下文相關(guān)的數(shù)據(jù)傳遞給這個插槽：在這個例子中，這個數(shù)據(jù)是 todo 對象：
<ul>?<li??v-for="todo in todos"??v-bind:key="todo.id"?>??<!-- 我們?yōu)槊總€ todo 準(zhǔn)備了一個插槽，-->??<!-- 將 `todo` 對象作為一個插槽的 prop 傳入。-->??<slot v-bind:todo="todo">???<!-- 回退的內(nèi)容 -->???{{ todo.text }}??</slot>?</li></ul>現(xiàn)在當(dāng)我們使用?<todo-list>?組件的時候，我們可以選擇為待辦項定義一個不一樣的<template>?作為替代方案，并且可以通過?slot-scope?特性從子組件獲取數(shù)據(jù)：
<todo-list v-bind:todos="todos">??<!--插槽作用域的名字是 slotProps-->??<template slot-scope="slotProps">????<!-- 為指定的待辦項定義一個模板-->????<span v-if="slotProps.todo.isComplete">?</span>????{{ slotProps.todo.text }}??</template></todo-list>在 2.5.0+，slot-scope 不再限制在?<template>?元素上使用，而可以用在插槽內(nèi)的任何元素或組件上。
解構(gòu) slot-scope
如果一個 JavaScript 表達(dá)式在一個函數(shù)定義的參數(shù)位置有效，那么這個表達(dá)式實(shí)際上就可以被?slot-scope?接受。也就是說你可以在支持的環(huán)境下 單文件組件或現(xiàn)代瀏覽器)，在這些表達(dá)式中使用?ES2015 解構(gòu)語法。例如：
<todo-list v-bind:todos="todos">?<template slot-scope="{ todo }">??<span v-if="todo.isComplete">?</span>??{{ todo.text }}?</template></todo-list>這會使作用域插槽變得更干凈一些。
