文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中如何使用嵌套插槽

2024-04-02 19:55

关注

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

无循环实现循环

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

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

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

递归表示一个列表

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

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

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

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

[head, tail]

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

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

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

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

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

<div>   1   <div>     2     <div>       3     </div>   </div> </div>

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

构建组件

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

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

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

[1, 2, 3]

这里要讨论两种情况:

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

<template>   <v-for :list="[1, 2, 3]" /> </template>

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

<template>   <div>     {{ list[0] }}   </div> </template>

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

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

<template>   <div>     {{ list[0] }}     <v-for :list="list.slice(1)" />   </div> </template>

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

顺序是这样的:

现在,我们的Vue应用程序的结构如下所示:

<App>   <v-for>     <v-for>       <v-for />     </v-for>   </v-for> </App>

可以看到,我们有几个v-for组件,它们彼此嵌套在一起。最后一件事,我们需要停止递归

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

最终,渲染完所有项后,我们需要停止递归操作。

(2) 递归嵌套的插槽

现在,组件可以正常工作,但是我们也希望它与作用域内插槽一起使用,因为这样可以自定义渲染每个项的方式:

<template>   <v-for :list="list">     <template v-slot="{ item }">       <strong>{{ item }}</strong>     </template>   </v-for> </template>

(3) 嵌套插槽

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

首先,我们将简要介绍嵌套插槽的工作方式,然后介绍如何将它们合并到v-for组件中。

假设我们有三个组件:Parent、Child和Grandchild。我们希望传递来自Parent组件的一些内容,并在Grandchild组件中渲染它。

从Parent开始,我们传递一些内容:

// Parent.vue <template>   <Child>     <span>Never gonna give you up</span>   </Child> </template>

我们在Child组件中做一些事情,将在稍后介绍。然后我们的Grandchild组件获取插槽并渲染内容:

// Grandchild.vue <template>   <div>     <slot />   </div> </template>

那么,这个Child组件是什么样的?

我们需要它从Parent组件获取内容并将其提供给Grandchild组件,因此我们将两个不同的插槽连接在一起。

// Child.vue <template>   <Grandchild>     <slot />   </Grandchild> </template>

请记住,元素渲染出作为插槽传递到组件的内容。因此,我们将从“Parent”中获取该内容,然后将其渲染到“Grandchild”插槽中。

(4) 添加作用域插槽

与嵌套作用域插槽唯一不同的是,我们还必须传递作用域数据。将其添加到v-for中,我们现在得到以下信息:

<template>   <div>     <slot v-bind:item="list[0]">       <!-- Default -->       {{ list[0] }}     </slot>     <v-for       v-if="list.length > 1"       :list="list.slice(1)"     >       <!-- Recursively pass down scoped slot -->       <template v-slot="{ item }">         <slot v-bind:item="item" />       </template>     </v-for>   </div> </template>

首先让我们看一下基本情况。

如果没有提供插槽,则默认元素内部的内容,并像以前一样渲染list[0]。但是如果我们提供了一个slot,它会将其渲染出来,并通过slot作用域将列表项传递给父组件。

这里的递归情况类似。如果我们将插槽传递给v-for,它将在下一个v-for的插槽中进行渲染,因此我们得到了嵌套。它还从作用域槽中获取item并将其传递回链。

以上就是Vue中如何使用嵌套插槽,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯