14. vue的插槽

vue的插槽

插槽這個概念相對就比較抽象，但抽象的概念用生活中常見的事物去做類比，也就變得沒那麼抽象了！

舉一個生活中的例子：比如裝修房子的時候我們會在很多地方預留出一些插孔，可能要插電冰箱，插電式，插充電器等，反正就是你覺得預留在這個位置的插座一定有用，這個預留的插座就類似我們今天要說的插槽，插槽就是你在模闆中提前通過一個占位符(slot)來預言一塊固定的區域将來會被某些元素替換掉，但是這個位置我得先預留出來。

在veu 2.6.0 中，具名插槽和作用域插槽引入了一個新的統一的文法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute。

在元件中定義一個<slot></slot>标簽即可

如果插槽内具有共性的東西較多，可在插槽内設定預設值，當沒有在插槽傳入值時顯示預設值

如果有多個值，同時放入到元件中進行替換時，一起作為替換元素

插槽的定義位置在元件中，是以首先我們得建立一個元件，再在這個元件中定義插槽，再使用！

老規矩，翠花上代碼：

運作這段代碼我們會看到元件為我們渲染除了slot插槽裡的預設内容，當然我們也可以不用設定預設内容，那麼它将不會顯示任何東西，那如何覆寫預設内容呢？隻需要在元件中插入你需要顯示的内容即可，如下：

修改之後，我們可以看到渲染的内容已經變成了我們在 mainview 中定義的内容！

這就是插槽 <slot> 一個基本使用，還是比較好了解的。但一般在實際項目中不會像 demo 一樣簡單直接。

通常情況下，一個頁面設計非常複雜，需要在一個頁面的不同位置放入不同的插槽内容。那麼在這種情況下，我們就需要給插槽 <slot> 指定一個具體的名稱 name，使其具有具體比對的特性，在 Vue 中把這種具有具體名稱 name 的插槽叫做具名插槽。

現在，假設我們要做一個部落格頁面，這個頁面分為三個部分頭部header, 内容main，底部footer，這三個子產品我們都通過插槽來實作！

以上案例中layout組建中定義了三個插槽，其中header和footer通過slot的name屬性制定了插槽的名稱，main用一個預設插槽填充，其中header和footer兩個具名插槽會精确地比對 name傳入相應的插槽，任何沒有被包裹在帶有 v-slot 的 <template> 中的内容都會被視為預設插槽的内容。

注意： v-slot 隻能添加在 <template> 上 ，并且可以縮寫為一個#，即把參數之前的所有内容 (v-slot:) 替換為字元 #。例如 v-slot:header 可以被重寫為 #header：

什麼是作用域插槽？要弄清楚這個問題就得先知道作用域的概念，我們一起先來看看百度百科給出的解釋！

百度百科：通常來說，一段程式代碼中所用到的名字并不總是有效/可用的，而限定這個名字的可用性的代碼範圍就是這個名字的作用域。 作用域的使用提高了程式邏輯的局部性，增強程式的可靠性，減少名字沖突。

vue的作用域插槽在2.6版本中有所改變，之前版本中使用的slot-scope指令已經廢棄，統一成了v-slot方法。

我們來看這個例子，首先我們定義了一個<current-user>的元件，這個元件的模闆中定義了一個預設插槽并設定了一個初始值{{ user.lastName }}，運作這段代碼會看到如期渲染除了組建中傳入的lastName的值，但是有一天這個名字我不讓顯示了，隻讓顯示一個姓就行了，我們知道插槽就是為了預定義一個區塊，之後你想插入什麼随你，但是要在父元件中調用子元件的frstName覆寫掉插槽預設傳入的lastName要怎麼做呢？這時候就是作用域插槽出場的時候了！

我們看作用域的概念發現裡邊總是提到作用域是一個有名字的代碼範圍，其實這在Vue的插槽表現形式中應該就是具名插槽，具名插槽要用到v-slot指令，v-slot又隻能在template中使用。

首先，我們必須把子元件的user作為slot的元素屬性通過v-bind綁定上去才可以，這個綁定在 <slot> 元素上的 屬性 （user）被稱為插槽 prop。

現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字：

在這個例子中，我們選擇将包含所有插槽 prop 的對象命名為 slotProps，但你也可以使用任意你喜歡的名字。

注意，如果當我們提供的元件模闆中有且僅有一個預設插槽時，元件的标簽可以被當做插槽的模闆使用，簡寫為：

但是，注意預設插槽的縮寫文法不能和具名插槽混用，因為它會導緻作用域不明确！

動态插槽依賴的是Vue2.6新增的動态參數概念，這裡我大緻說一下什麼是動态參數：

這個示例中用方括号括起來的 JavaScript 表達式作為一個指令的參數進行動态求值，求得的值将會作為最終的參數來使用！

這個動态的值可以通過方法，計算屬性或者data裡的資料作為内容，如下所示：