vue中的插槽详解
作者:A黄俊辉A 发布时间:2024-05-03 15:08:50
标签:vue,插槽,详解
vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot )
插槽的分类
默认插槽
具名插槽
作用域插槽
当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了,
如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽
当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽
下面展示一下, 默认插槽的用法
使用时
以上就是默认插槽的使用
具名插槽, 也就是说我们在组件中定一个 多个 slot , 为了分清到底作用到哪一个上面, 给插槽取一个名字来区分
使用的时候
这里说一下, vue 2.6 版本有一个新的插槽的写法, 其中要使用到 template 标签, , 我们知道 template 只是一个包裹标签, 它不会渲染到真实页面上, 新的slot 的写法就是使用到了它, 没有它还不行, 如下图
下面来说一下作用域插槽
我们来看一下, 上面的两种 插槽 展示的数据, 都是放在 插槽的使用者 About 组件的 data中的,
但是我们有时候, 使用者是不管这些数据的, 数据中从 catetory 组件中自已获取的,
使用者 About 只需要来管理 插槽中的内容的展现形式,
这时就要使用作用域插槽了
上图中, 可以看到 作用域插槽中 向使用者传递了两个数据
那个使用者是怎么接收使用的呢
以上便是 vue 的三种插槽的使用
来源:https://blog.csdn.net/hjh15827475896/article/details/120795262


猜你喜欢
- 本文主要介绍了IDEA配置连接MYSQL数据库遇到Failed这个问题解决,分享给大家,具体如下: &nb
- 错误提示Invalid byte 1 of 1-byte UTF-8 sequence原因分析在中文版的window下java的默认的编码为
- 场景在使用Tortoise操作数据库的时候发现,通过对操作数据库模型加以装饰器,如@pre_save(Model),可以实现对这个模型在sa
- 一.思路1.整体思路2.代码思路思路很简单,就是用python发送请求,提取响应体中的状态码加以判断,最后保存到本地txt文本中,以实现网站
- 经常写 shell 脚本知道,字符串判断可以用 =,!= 数字的判断是 -eq,-ne 等,但是 Python 确不是这样子的。所以作为慢慢
- 本文实例讲述了Go语言模拟while语句实现无限循环的方法。分享给大家供大家参考。具体实现方法如下:这段代码把for语句当成C语言里的whi
- 在索引列上使用函数使得索引失效的是常见的索引失效原因之一,因此尽可能的避免在索引列上使用函数。尽管可以使用基于函数的索引来解决索引失效的问题
- 层次化索引是pandas的一项重要功能,它使你能在一个轴上拥有多个(两个以上)索引级别。创建一个Series,并用一个由列表或数组组成的列表
- 首先找到要下载的歌曲排行榜的链接,这里用的是:https://music.163.com/discover/toplist?id=37786
- 本文实例讲述了PHP实现根据数组某个键值大小进行排序的方法。分享给大家供大家参考,具体如下:问题:针对给定数组的某个键的键值进行排序解决方法
- 把列表传递给函数后, 函数就能直接访问列表中的内容咯。假设有一组专家,我们想邀请他们参加研讨会。def send_invitation(ex
- 数据库表间数据复制分类在利用数据库开发时,常常会将一些表之间的数据互相导入。当然可以编写程序实现,但是,程序常常需要开发环境,不方便。最方便
- 前言最近在学习python,学习到了一个之前没接触过的--特殊方法。什么是特殊方法?当我们在设计一个类的时候,python中有一个用于初始化
- 前几天,在所有数据库服务器部署了监控磁盘空间的存储过程和作业后(MS SQL 监控磁盘空间告警),今天突然收到了两封告警邮件,好吧,存储规划
- windows下python的安装教程,供大家参考,具体内容如下—–因为我是个真小白,网上的大多入门教程并不适合我这种超级超级小白,有时候还
- 这篇文章主要介绍了python装饰器使用实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- 聚集索引,数据实际上是按顺序存储的,数据页就在索引页上。就好像参考手册将所有主题按顺序编排一样。一旦找到了所要搜索的数据,就完成了这次搜索,
- 错误图片解决mysql -u root -p 以root身份进入mysqlgrant all on *.* to 'root'
- IE8 的测试版发布,ACID 3 测试正式推出,听上去是让人兴奋的技术进步,而对中文互联网站却是极大的威胁:这意味着,超过半数的中文网页在
- OpenCV的全称是:Open Source Computer Vision Library。OpenCV是一个基于(开源)发行的跨平台计算