作者：Michael Thiessen 译者：前端小智 来源：medium
最近我弄清楚了如何递归地实现嵌套插槽，包括如何使用作用域插槽来实现。起因是我想看看是否可以构建一个复制指令但仅使用组件。
它还支持插槽和作用域插槽，也可以支持命名插槽，我们可以这样使用它：
第一个将正常打印列表，而第二个将每个项包装在标记中。
这不是一个非常有用的组件，但可以从中学到的最多，我们来看看。
通常，当我们要渲染元素或组件的列表时，可以使用指令，但这次我们希望完全摆脱它。
那么，我们如何在不使用循环的情况下渲染项目列表呢？就是使用 递归。
我们可以使用递归来渲染项目列表。过程并不会复杂，我们来看看怎么做。
递归表示一个列表
我在大学里最喜欢的课程之一是。
对我来说，最有趣的部分是探索函数式编程和逻辑编程，并了解与命令式编程的区别(Javascript 和最流行的语言是命令式编程)。
这门课让我真正了解如何使用递归，因为在纯函数语言中，一切都是递归。不管怎样，从那门课我学到了可以使用递归地表示一个列表。
与使用数组不同，每个列表是一个值(头)和另一个列表(尾)。
例如要表示列表，则可以递归方式表示为：
我们必须以某种方式结束列表，因此我们使用而不是另一个数组（也可以使用空数组）。
看到这里，你或许就可以明白了，我们可以使用此概念并将其应用于我们的组件。 相反，我们将递归嵌套组件以表示列表。
我们最终将渲染出这样的内容。 注意我们“list”的嵌套结构：
诚然，这与渲染的效果并不完全相同，但这也不是本练习的重点。
首先，我们将解决递归渲染项目列表的问题。
使用递归来渲染列表
这次我们使用一个普通数组，而不是使用前面介绍的递归列表：
这里要讨论两种情况：
我们把传给
我们希望获取列表中的第一项，即，并显示它
现在，该组件将渲染，就像我们期望的那样。
但是我们不能只渲染第一个值并停止。 我们需要渲染值，然后还渲染列表的其余部分：
我们不传递整个数组，而是删除第一项并传递新数组。第一个项目我们已经打印出来了，所以没有必要保留它。
顺序是这样的：
现在，我们的Vue应用程序的结构如下所示：
可以看到，我们有几个组件，它们彼此嵌套在一起。最后一件事，我们需要停止递归
最终，渲染完所有项后，我们需要停止递归操作。
现在，组件可以正常工作，但是我们也希望它与作用域内插槽一起使用，因为这样可以自定义渲染每个项的方式：
嵌套插槽
一旦弄清楚了如何递归地嵌套插槽，就会对它痴迷一样的感叹：
首先，我们将简要介绍嵌套插槽的工作方式，然后介绍如何将它们合并到组件中。
假设我们有三个组件：、和。我们希望传递来自组件的一些内容，并在组件中渲染它。
从开始，我们传递一些内容：
我们在组件中做一些事情，将在稍后介绍。 然后我们的组件获取插槽并渲染内容：
那么，这个组件是什么样的？
我们需要它从组件获取内容并将其提供给组件，因此我们将两个不同的插槽连接在一起。
请记住，元素渲染出作为插槽传递到组件的内容。 因此，我们将从中获取该内容，然后将其渲染到插槽中。
与嵌套作用域插槽唯一不同的是，我们还必须传递作用域数据。将其添加到中，我们现在得到以下信息：
首先让我们看一下基本情况。
如果没有提供插槽，则默认元素内部的内容，并像以前一样渲染。 但是如果我们提供了一个，它会将其渲染出来，并通过作用域将列表项传递给父组件。
这里的递归情况类似。 如果我们将插槽传递给，它将在下一个的插槽中进行渲染，因此我们得到了嵌套。 它还从作用域槽中获取并将其传递回链。
现在，我们这个组件仅使用就能实现 效果。
我们做了很多事情，终于了解了如何创建一个仅使用 template 就能实现的效果。
本文主要内容：
原文：
到此这篇vue组件嵌套与插槽嵌套（vue组件多层嵌套如何传递数据）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/32645.html