作者：MichaelThiessen译者：前端小智来源：Medium已被收录在qq44924588...，更多往期好评文章已归类，还有一大堆我的文档和教程资料也都整理好了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。最近我弄清楚了如何递归地实现嵌套槽，包括如何使用作用域槽来实现。这样做的原因是我想看看是否可以构建v-for指令的副本，但只使用模板组件。它还支持槽和作用域槽，也可以支持命名槽，我们可以这样使用：
作者：MichaelThiessen译者：前端小智来源：Medium已被收录在qq44924588...，更多往期好评文章已归类，还有一大堆我的文档和教程资料也都整理好了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。最近我弄清楚了如何递归地实现嵌套槽，包括如何使用作用域槽来实现。这样做的原因是我想看看是否可以构建v-for指令的副本，但只使用模板组件。它还支持槽和作用域槽，也可以支持命名槽，我们可以这样使用：第一个将正常打印列表，而第二个将每个项目包装在标记中。它不是一个非常有用的组件，但您可以从中学到最多，让我们来看看。没有循环的循环通常，当我们想要渲染一个元素或组件列表时，我们使用v-for指令，但这次我们想完全摆脱它。那么，我们如何在不使用循环的情况下渲染项目列表呢？只需使用递归。我们可以使用递归来呈现项目列表。过程并不复杂，让我们看看怎么做吧。递归表示列表我在大学里最喜欢的课程之一是“编程语言概念”。对我来说最有趣的部分是探索函数式编程和逻辑编程以及理解与命令式编程的区别（Javascript和大多数流行的语言都是命令式的）。这堂课让我真正明白了如何使用递归，因为在纯函数式语言中，一切都是递归。无论如何，从那堂课上我了解到列表可以递归表示。与使用数组不同，每个列表都是一个值（头）和另一个列表（尾）。[head,tail]例如表示列表[1,2,3]，可以递归表示为：[1,[2,[3,null]]]我们必须以某种方式结束列表，所以我们使用null而不是另一个数组（也可以使用空数组）。看到这里，你大概可以明白，我们可以使用这个概念，并将其应用到我们的组件中。相反，我们将递归地嵌套组件来表示列表。我们最终会渲染这样的东西。注意我们“列表”的嵌套结构：1当然，这不是v-for渲染的内容，但不是这个练习的重点之一。构建组件首先，我们将解决递归呈现项目列表的问题。使用递归渲染列表这次我们使用一个普通的数组，而不是使用前面介绍的递归列表：[1,2,3]这里分两种情况来讨论：基本情况-渲染列表中的第一项递归情况-渲染项，然后下沉到下一个列表中我们将[1,2,3]传给v-for23{{list[0]}}现在，组件将呈现1，正如我们预期的那样。但我们不能只渲染第一个值就停止。我们需要渲染值，然后渲染列表的其余部分：{{list[0]}}我们不传递整个列表数组，而是删除第一项并传递新数组。我们已经打印出第一项，所以没有必要保留它。顺序是这样的：我们将[1,2,3]传入v-for以渲染我们的v-for组件渲染1，然后我们将[2,3]传入下一个v-for以渲染[2,3]并渲染2，然后将[3]传递给下一个v-for，最后一个v-for组件渲染3，我们已经打印出列表了！现在，我们的Vue应用程序的结构如下所示：{{list[0]}}最后，在所有item渲染完成后，我们需要停止递归。递归嵌套的插槽组件现在可以正常工作，但我们也希望它可以与作用域插槽一起使用，因为这允许自定义每个项目的呈现方式：那么，这个Child组件长什么样？我们需要它从Parent组件获取内容并将其提供给Grandchild组件，因此我们将两个不同的插槽连接在一起。//Child.vue首先让我们看一下基础知识。如果没有提供插槽，则