如何在Vue中使用嵌套插槽（包括作用域插槽）

第一个将正常打印列表，而第二个将每个项目包装在标记中。它不是一个非常有用的组件，但您可以从中学到最多，让我们来看看。没有循环的循环通常，当我们想要渲染一个元素或组件列表时，我们使用v-for指令，但这次我们想完全摆脱它。那么，我们如何在不使用循环的情况下渲染项目列表呢？使用“递归”。我们可以使用递归来呈现项目列表。过程并不复杂，让我们看看怎么做吧。列表的递归表示我在大学里最喜欢的课程之一是[“编程语言概念”][1]。对我来说最有趣的部分是探索函数式编程和逻辑编程以及理解与命令式编程的区别（Javascript和大多数流行的语言都是命令式的）。这堂课让我真正明白了如何使用递归，因为在纯函数式语言中，一切都是递归。无论如何，从那堂课上我了解到列表可以递归表示。与使用数组不同，每个列表都是一个值（头）和另一个列表（尾）。[head,tail]例如表示列表[1,2,3]，它可以递归地表示为：[1,[2,[3,null]]]我们必须以某种方式结束列表，所以我们使用null而不是另一个数组（也可以使用空数组）。看到这里，你大概可以明白，我们可以使用这个概念，并将其应用到我们的组件中。相反，我们将递归地嵌套组件来表示列表。我们最终会渲染这样的东西。注意我们“列表”的嵌套结构：当然，这不是v-for渲染的内容，但不是这个练习的重点之一。构建组件首先，我们将解决递归呈现项目列表的问题。(1)使用递归渲染列表这次我们使用普通数组代替前面介绍的递归列表：[1,2,3]这里分两种情况来讨论：基本情况——渲染列表中的第一项是递归的情况-渲染项目，然后下沉我们将[1,2,3]传递给v-for我们想要的列表获取列表中的第一项，即1，并显示它现在，组件将呈现1，就像我们期望的那样那。但我们不能只渲染第一个值就停止。我们需要渲染值，然后渲染列表的其余部分：我们不传递整个列表数组，而是删除第一项并传递新数组。我们已经打印出第一项，所以没有必要保留它。顺序是这样的：我们将[1,2,3]传递给v-for用于渲染我们的v-for组件渲染1，然后我们将[2,3]传递给下一个v-for用于渲染需要[2,3]并渲染2，然后将[3]传递给下一个v-for，最后一个v-for组件渲染3，我们已经打印出列表了！现在，我们的Vue应用程序的结构如下所示：如您所见，我们有几个v-for组件相互嵌套在一起。最后一件事，我们需要停止递归最后，在渲染完所有项目后，我们需要停止递归。(2)递归嵌套插槽组件现在可以正常工作，但我们也希望它可以与作用域插槽一起使用，因为这允许自定义每个项目的呈现方式：(3)nestedslotonce一旦你弄清楚了如何递归嵌套槽，你会沉迷于它：嵌套n层槽递归槽包装器组件将一个槽转换为多个槽首先，我们将简要介绍嵌套槽的工作原理，然后介绍如何将它们合并到v-for组件中。假设我们有三个组件：Parent、Child和Grandchild。我们想从Parent组件传递一些内容并将其呈现在Grandchild组件中。从Parent，我们传递了一些内容：//Parent.vue我们在Child组件中做了一些东西，后面会介绍。然后我们的Grandchild组件获取插槽并渲染内容：//Grandchild.vue那么，这个Child组件长什么样？我们需要从Parent组件获取内容并提供给Grandchild组件，所以我们将两个不同的槽连接在一起。//Child.vue请记住，元素渲染出作为插槽传递给组件的内容。所以我们将从“Parent”中获取它并将其渲染到“Grandchild”插槽中。(4)添加作用域插槽和嵌套作用域插槽之间的唯一区别是我们还必须传递作用域数据。将其添加到v-for，我们现在得到以下内容：