Vue中插槽slot的使用

　　插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題在這裏就點出來了，是顯示不顯示和怎樣顯示。

　　因爲插槽是一塊模板，因此，對於任何一個組件，從模板種類的角度來分，其實均可以分爲非插槽模板和插槽模板兩大類。

　　非插槽模板指的是html模板，好比‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由組件自身控制；

　　插槽模板是slot，它是一個空殼子，由於它的顯示與隱藏以及最後用什麼樣的html模板顯示由父組件控制。可是插槽顯示的位置卻由子組件自身決定，slot寫在組件template的什麼位置，父組件傳過來的模板未來就顯示在什麼位置。

一、插槽內容

　　vue實現了一套內容分發的api，將 slot 元素做爲承載內容分發的出口。

　　插槽內能夠包含任何模板代碼，包括html，以及其餘組件。

　　若是組件內沒有一個 slot 元素，那麼該組件起始標籤和結束標籤之間的任何內容都會被拋棄。

二、編譯做用域

　　規則：父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯的。

三、後備內容

　　有時爲一個插槽設置具體的後備 (也就是默認的) 內容是頗有用的，它只會在沒有提供內容的時候被渲染。

　　很簡單，就是默認值的概念。<slot>Submit</slot>

四、具名插槽

　　須要多個插槽的狀況，slot 元素有一個特殊的屬性：name，用來定義額外的插槽。一個不帶 name 的 <slot> 出口會帶有隱含的名字「default」。

　　在向具名插槽提供內容的時候，咱們能夠在一個 <template> 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱：

<template v-slot:footer> <p>Here's some contact info</p> </template>

　　如今 <template> 元素中的全部內容都將會被傳入相應的插槽。任何沒有被包裹在帶有 v-slot 的 <template> 中的內容都會被視爲默認插槽的內容。

　　注意：v-slot只能添加在一個 <template> 上（有一種例外），這一點和已廢棄的slot特性不一樣

五、做用域插槽

<current-user> {{ user.firstName }} </current-user> 

　　上述代碼不會正常工做，由於只有 <current-user> 組件能夠訪問到 user 而咱們提供的內容是在父級渲染的。爲了讓 user 在父級的插槽內容可用，咱們能夠將 user 做爲 <slot> 元素的一個特性綁定上去：

<span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>

　　綁定在 <slot> 元素上的特性被稱爲插槽 prop。如今在父級做用域中，咱們能夠給 v-slot 帶一個值來定義咱們提供的插槽 prop 的名字：

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>

　　咱們選擇將包含全部插槽 prop 的對象命名爲 slotProps，但你也可使用任意你喜歡的名字。

　　（1）獨佔默認插槽縮寫方式：

　　當被提供的內容只有默認插槽時，組件的標籤才能夠被看成插槽的模板來使用。這樣咱們就能夠把 v-slot 直接用在組件上，這也就是上面說的例外狀況

<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>

　　注意：只要出現多個插槽，請始終爲全部的插槽使用完整的基於 <template> 的語法

　　（2）解構插槽：

　　做用域插槽的內部工做原理是將你的插槽內容包括在一個傳入單個參數的函數裏，這意味着 v-slot 的值實際上能夠是任何可以做爲函數定義中的參數的 JavaScript 表達式，因此能夠利用ES6的解構來傳入參數

<current-user v-slot="{ user: person }"> {{ person.firstName }} </current-user>

　　解構：v-slot="{ user }"

　　重命名：v-slot="{ user: person }"

　　定義默認值：v-slot="{ user = { firstName: 'Guest' } }"

六、動態插槽名

　　<template v-slot:[dynamicSlotName]> ... </template>

七、縮寫

　　v-slot:header 能夠被重寫爲 #header

八、其餘示例

　　主要來自官網學習整理：https://cn.vuejs.org/v2/guide/components-slots.html