Vue中如何使用嵌套插槽

本篇文章给大家分享的是有关Vue中如何使用嵌套插槽，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联-专业网站定制、快速模板网站建设、高性价比长洲网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式长洲网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖长洲地区。费用合理售后完善，十载实体公司更值得信赖。

无循环实现循环

通常，当我们要渲染元素或组件的列表时，可以使用v-for指令，但这次我们希望完全摆脱它。

那么，我们如何在不使用循环的情况下渲染项目列表呢?就是使用 「递归」。

我们可以使用递归来渲染项目列表。过程并不会复杂，我们来看看怎么做。

递归表示一个列表

我在大学里最喜欢的课程之一是[“编程语言概念”][1]。

对我来说，最有趣的部分是探索函数式编程和逻辑编程，并了解与命令式编程的区别(Javascript 和最流行的语言是命令式编程)。

这门课让我真正了解如何使用递归，因为在纯函数语言中，一切都是递归。不管怎样，从那门课我学到了可以使用递归地表示一个列表。

与使用数组不同，每个列表是一个值(头)和另一个列表(尾)。

[head, tail]

例如要表示列表[1、2、3]，则可以递归方式表示为：

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

我们必须以某种方式结束列表，因此我们使用null而不是另一个数组(也可以使用空数组)。

看到这里，你或许就可以明白了，我们可以使用此概念并将其应用于我们的组件。相反，我们将递归嵌套组件以表示列表。

我们最终将渲染出这样的内容。注意我们“list”的嵌套结构：

   1   
     2     
       3     
   
 

诚然，这与v-for渲染的效果并不完全相同，但这也不是本练习的重点。

构建组件

首先，我们将解决递归渲染项目列表的问题。

(1) 使用递归来渲染列表

这次我们使用一个普通数组，而不是使用前面介绍的递归列表：

[1, 2, 3]

这里要讨论两种情况：

• 基本情形-渲染列表中的第一项

• 递归情形-渲染项目，然后沉浸下一个列表

我们把[1,2,3]传给v-for

我们希望获取列表中的第一项，即1，并显示它

现在，该组件将渲染1，就像我们期望的那样。

但是我们不能只渲染第一个值并停止。我们需要渲染值，然后还渲染列表的其余部分：

我们不传递整个list数组，而是删除第一项并传递新数组。第一个项目我们已经打印出来了，所以没有必要保留它。

顺序是这样的：

• 我们将[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) 嵌套插槽

一旦弄清楚了如何递归地嵌套插槽，就会对它痴迷一样的感叹：

• 嵌套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中，我们现在得到以下信息：