vue中插槽(slot)几种类型的使用方法

 更新时间:2024年03月17日 11:10:16   作者:admin-Y  
本文主要介绍了vue中插槽(slot)几种类型的使用方法,主要分三种,默认插槽,具名插槽,作用域插槽,下面就来一起介绍一下,感兴趣的可以了解一下

前言

vue的slot主要分三种,默认插槽,具名插槽,作用域插槽;使用插槽是在存在父子关系的组件中使用,我们可以在子组件中决定插槽的位置,同时子组件也可以给这些插槽的默认信息,当父组件中没有需要给子组件插槽插入信息时,显示的是子组件插槽定义的默认信息,下边简单说下vue这三种插槽如何使用。

准备工作

很简单,就创建父组件testSlot.vue,子组件children.vue,并在testSlot组件中注册引入children组件。

一 默认插槽的使用:

默认插槽:

在子组件中定义一个默认插槽:

在这里插入图片描述

在开发中我们经常使用到组件之间的传值,但很多情况涉及到的都是数据属性的传值,比如父组件将msg传给子组件:

在这里插入图片描述

现在如果是这种情况:

在这里插入图片描述

如果子组件中没有使用插槽的情况下:

在这里插入图片描述

浏览器中的页面,父组件中的p标签的内容是不会还给子组件的:

在这里插入图片描述

这时候,想让父组件定义的p标签传给子组件并显示,可以在子组件中定义一个默认插槽:

在这里插入图片描述

在子组件中,你也可以定义多个默认插槽,并在子组件中决定这些默认插槽的位置,父组件要插入的内容,都会被填充到这些默认的插槽中:

在这里插入图片描述

当然,父组件定义要插入到子组件的插槽的内容,并不一定只有是dom结构类型的,也可以是一个组件,也可以是普通的数据结构,只要子组件有定义插槽,就会把内容填充进去。

二 具名插槽的使用:

具名插槽:

vue 2.6.0 版本使用具名插槽和作用域插槽有了新的统一语法,使用v-slot替换了之前的slot和slot-scope

什么叫具名插槽?

其实就是在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将内容根据name来填充对应的内容。

子组件中,定义两个具名插槽:

在这里插入图片描述

父组件中:

为了验证,子组件中的插槽可以填充任何结构的内容,所以我这边专门在one_slot插槽中插入一个组件,而在two插槽就单纯插入一串普通的数据

在这里插入图片描述

页面结果:

在这里插入图片描述

当然,子组件可以定义多个同名的具名插槽:

在这里插入图片描述

三 作用域插槽:

作用域插槽:<slot :自定义name=data中的属性或对象>

通过上边的默认插槽和具名插槽的使用过程中,发现,基本都是父组件中决定要插入到子组件中的内容,而子组件自行决定插槽的位置。

具名插槽,就是实现在子组件中自行决定自己要显示什么内容。

子组件:

在这里插入图片描述

父组件:

这种时候有一种情况需要注意:

如果子组件中只有一个作用域插槽时,父组件可以使用下边这种简单的写法,当然规范点还是加上template模板标签好点:

在这里插入图片描述

页面效果:

在这里插入图片描述

但是当子组件中有多个作用域插槽时,不建议上边这种简单的写法,因为可能会出现作用域不明确的问题。

子组件有多个作用域插槽时:

在这里插入图片描述

父组件使用这种规范的写法,可以避免有时作用域不明确问题:

在这里插入图片描述

在这里插入图片描述

到此这篇关于vue中插槽(slot)几种类型的使用方法的文章就介绍到这了,更多相关vue 插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue递归实现三级菜单

    vue递归实现三级菜单

    这篇文章主要为大家详细介绍了vue递归实现三级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue使用neovis操作neo4j图形数据库及优缺点

    vue使用neovis操作neo4j图形数据库及优缺点

    这篇文章主要介绍了vue使用neovis操作neo4j图形数据库,本文给大家介绍了与常规做法的优缺点对比及使用技巧,对vue neo4j图形数据库相关知识感兴趣的朋友一起看看吧
    2022-02-02
  • 详解element-ui日期时间选择器的日期格式化问题

    详解element-ui日期时间选择器的日期格式化问题

    这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题,本文用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,有兴趣的一起来了解一下
    2019-04-04
  • Vue3 (五)集成HTTP库axios详情

    Vue3 (五)集成HTTP库axios详情

    这篇文章主要讲解Vue3 集成HTTP库axios的相关内容,本文讲围绕如何利用Vue3 集成HTTP库axios的相关资料展开文章,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • 解读vue分页面打包方式

    解读vue分页面打包方式

    这篇文章主要介绍了解读vue分页面打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 可能是全网vue v-model最详细讲解教程

    可能是全网vue v-model最详细讲解教程

    Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue执行流程及渲染示例解析

    Vue执行流程及渲染示例解析

    这篇文章主要为大家介绍了Vue执行流程及渲染解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue实现飞机大战小游戏

    Vue实现飞机大战小游戏

    这篇文章主要为大家详细介绍了Vue实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 浅析在Vue中watch使用的必要性及其优化

    浅析在Vue中watch使用的必要性及其优化

    这篇文章主要来和大家深入讨论一下在Vue开发中是否有必要一定用watch,如果换成watcheffect会如何,文中的示例代码讲解详细,需要的可以参考下
    2023-12-12

最新评论