技術標籤：count和distinct如何一起使用for裡面巢狀ifvue list新增元素vue take取陣列前幾個vue 巢狀iframe第一次無資料vue 獲取list長度

最近我弄清楚瞭如何遞迴地實現巢狀插槽，包括如何使用作用域插槽來實現。起因是我想看看是否可以構建一個複製v-for指令但僅使用template元件。

它還支援插槽和作用域插槽，也可以支援命名插槽，我們可以這樣使用它：

{{ item }}


第一個將正常列印列表，而第二個將每個項包裝在標記中。

這不是一個非常有用的元件，但可以從中學到的最多，我們來看看。

無迴圈實現迴圈

通常，當我們要渲染元素或元件的列表時，可以使用v-for

指令，但這次我們希望完全擺脫它。

那麼，我們如何在不使用迴圈的情況下渲染專案列表呢？就是使用 「遞迴」。

我們可以使用遞迴來渲染專案列表。過程並不會複雜，我們來看看怎麼做。

遞迴表示一個列表

我在大學裡最喜歡的課程之一是[“程式語言概念”][1]。

對我來說，最有趣的部分是探索函數語言程式設計和邏輯程式設計，並瞭解與指令式程式設計的區別(Javascript 和最流行的語言是指令式程式設計)。

這門課讓我真正瞭解如何使用遞迴，因為在純函式語言中，一切都是遞迴。不管怎樣，從那門課我學到了可以使用遞迴地表示一個列表。

與使用陣列不同，每個列表是一個值(頭)和另一個列表(尾)。

[head, tail]
 

例如要表示列表[1、2、3]，則可以遞迴方式表示為：

[1, [2, [3, null]]]

我們必須以某種方式結束列表，因此我們使用null而不是另一個數組(也可以使用空陣列)。

看到這裡，你或許就可以明白了，我們可以使用此概念並將其應用於我們的元件。相反，我們將遞迴巢狀元件以表示列表。

我們最終將渲染出這樣的內容。注意我們“list”的巢狀結構：


1
2
3


誠然，這與v-for渲染的效果並不完全相同，但這也不是本練習的重點。

構建元件

首先，我們將解決遞迴渲染專案列表的問題。

使用遞迴來渲染列表

這次我們使用一個普通陣列，而不是使用前面介紹的遞迴列表：

[1, 2, 3]
 

這裡要討論兩種情況：

• 基本情形-渲染列表中的第一項
• 遞迴情形-渲染專案，然後沉浸下一個列表

我們把[1,2,3]傳給v-for

我們希望獲取列表中的第一項，即1，並顯示它


{{ list[0] }}


現在，該元件將渲染1，就像我們期望的那樣。

但是我們不能只渲染第一個值並停止。我們需要渲染值，然後還渲染列表的其餘部分：


{{ list[0] }}


我們不傳遞整個list陣列，而是刪除第一項並傳遞新陣列。第一個專案我們已經打印出來了，所以沒有必要保留它。

順序是這樣的：

1. 我們將[1,2,3]傳遞到v-for中進行渲染
2. 我們的v-for元件渲染1，然後將[2，3]傳遞到下一個v-for進行渲染
3. 取[2，3]並渲染2，然後將[3]傳遞到下一個v-for
4. 最後一個v-for元件渲染出3，我們已經打印出列表！

現在，我們的Vue應用程式的結構如下所示：

可以看到，我們有幾個v-for元件，它們彼此巢狀在一起。最後一件事，我們需要停止遞迴


{{ list[0] }} v-if="list.length > 1"
:list="list.slice(1)"
/>


最終，渲染完所有項後，我們需要停止遞迴操作。

遞迴巢狀的插槽

現在，元件可以正常工作，但是我們也希望它與作用域內插槽一起使用，因為這樣可以自定義渲染每個項的方式：

{{ item }}

巢狀插槽

一旦弄清楚瞭如何遞迴地巢狀插槽，就會對它痴迷一樣的感嘆：

• 巢狀n級的插槽
• 遞迴插槽
• 包裝元件將一個插槽轉換為多個插槽

首先，我們將簡要介紹巢狀插槽的工作方式，然後介紹如何將它們合併到v-for元件中。

假設我們有三個元件：Parent、Child和Grandchild。我們希望傳遞來自Parent元件的一些內容，並在Grandchild元件中渲染它。

從Parent開始，我們傳遞一些內容：

// Parent.vue
Never gonna give you up

我們在Child元件中做一些事情，將在稍後介紹。然後我們的Grandchild元件獲取插槽並渲染內容：

// Grandchild.vue

那麼，這個Child元件是什麼樣的？

我們需要它從Parent元件獲取內容並將其提供給Grandchild元件，因此我們將兩個不同的插槽連線在一起。

// Child.vue

請記住，元素渲染出作為插槽傳遞到元件的內容。因此，我們將從“Parent”中獲取該內容，然後將其渲染到“Grandchild”插槽中。

新增作用域插槽

與巢狀作用域插槽唯一不同的是，我們還必須傳遞作用域資料。將其新增到v-for中，我們現在得到以下資訊：


{{ list[0] }} v-if="list.length > 1"
:list="list.slice(1)"
>


首先讓我們看一下基本情況。

如果沒有提供插槽，則預設元素內部的內容，並像以前一樣渲染list[0]。但是如果我們提供了一個slot，它會將其渲染出來，並通過slot作用域將列表項傳遞給父元件。

這裡的遞迴情況類似。如果我們將插槽傳遞給v-for，它將在下一個v-for的插槽中進行渲染，因此我們得到了巢狀。它還從作用域槽中獲取item並將其傳遞迴鏈。

現在，我們這個元件僅使用template就能實現 v-for效果。

總結

我們做了很多事情，終於瞭解瞭如何建立一個僅使用 template 就能實現v-for的效果。

本文主要內容：

• 遞迴地表示列表
• 遞迴元件
• 巢狀槽和巢狀作用域槽

---

❝

作者：Michael Thiessen 譯者：前端小智 來源：medium

❞

原文：https://stackoverflow.com/questions/53430731/vuejs-nested-slots-how-to-pass-slot-to-grandchild

相關熱門推薦 CSS 中你需要知道 auto 的一切！CSS中的混合模式，製作高階特效的必備技巧CSS 偽元素的一些罕見用例我發現了7個關於 CSS backgroundImage 好用的技巧Web 隱藏技術：幾中隱藏 Web 中的元素方法及優缺點Vue 中，如何將函式作為 props 傳遞給元件如何寫出優雅的 JS 程式碼，變數和函式的正確寫法「前端程式設計挑戰 24」HTML+CSS3 實現粘性導航特效5個很棒的 React.js 庫，值得你親手試試！2020年面向前端開發人員的10個很棒的 JS 庫通過幾個事例，就可以說明 for...of 迴圈在 JS 是不可或缺