Vue中插槽slot的使用方法与应用场景详析
作者:JDragon 发布时间:2023-07-02 17:04:11
什么是插槽?
我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。
可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽。要求的版本是2.1.0+;
插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。插槽又分为 匿名插槽、具名插槽、作用域插槽。
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope
匿名插槽
匿名插槽,我们也可以叫它单个插槽或者默认插槽。和具名插槽相对,它是不需要设置 name 属性的,它隐藏的name属性为default。
father.vue
child.vue
匿名插槽,name的属性对应的是 default 也可以不写就是默认的意思啦;
在使用的时候还有一个问题要注意的 如果是有2个以上的匿名插槽是会child标签里面的内容全部都替换到每个slot;
具名插槽 (vue2.6.0+被废弃的slot='name')
顾名思义就是slot 是带有name的 ,定义: 或者使用简单缩写的定义 #header 使用:要用一个 template标签包裹
father.vue
child.vue
这里说一下多个具名插槽的使用 多个具名插槽,插槽的位置不是使用插槽的位置而定的,是在定义的时候的位置来替换的
father.vue
child.vue
作用域插槽
就是用来传递数据的插槽
当你想在一个插槽中使用数据时,要注意一个问题作用域的问题,Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的;
为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去: v-bind:text="text"
注意:
匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写,具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"
效果图
总结
来源:https://juejin.cn/post/6970621849835307045
猜你喜欢
- 在这个教材中,我们假定你已经安装了Scrapy。假如你没有安装,你可以参考这个安装指南。我们将会用开放目录项目(dmoz)作为我
- 前言如果你学过操作系统,那么对于锁应该不陌生。锁的含义是线程锁,可以用来指定某一个逻辑或者是资源同一时刻只能有一个线程访问。这个很好理解,就
- 1. 时间差函数(TIMESTAMPDIFF、DATEDIFF)需要用MySQL计算时间差,使用TIMESTAMPDIFF、DATEDIFF
- 其实很简单from keras.models import load_modelbase_model = load_model('m
- 1. 什么是 CSV 文件CSV(逗号分隔值)文件是使用逗号分隔信息的文本文件。该文件的每一行都是一条数据记录,也就意味着它可以用于以表格的
- 1、读文件import csvcsv_reader = csv.reader(open("data.file", enc
- 背景故事:我需要对一张图片做一些处理,是在图像像素级别上的数值处理,以此来反映图片 * 定区域的图像特征,网上查了很多,大多关于opencv的
- 对数字货币的崛起感到新奇的我们,并且想知道其背后的技术——区块链是怎样实现的。 但是完全搞懂区块链并非易事,我喜欢在实践中学习,通
- AES(英文:Advanced Encryption Standard,中文:高级加密标准),是一种区块加密标准。AES将原始数
- python open() 函数以指定模式打开一个文件,创建一个 file 对象,相关的方法才可以调用它进行读写。w 模
- 层及索引levels,刚开始学习pandas的时候没有太多的操作关于groupby,仅仅是简单的count、sum、size等等,没有更深入
- sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 s
- 笔主在做一个项目要生成一组随机有序的整型数字,并按行输出到文本文件使用,恰好开始学习Python3,遂决定直接使用Python3解决思路:与
- 假如有一个数据表A:id name title
- python除法负数商的取整方式与C++不同python:5 / -2 = -3若想和C++行为相同,可以使用 int(operator.t
- 今天给一个客户巡检的情况下发从库没有业务的情况mysqld的cpu的一个core占用100%.查主库慢查询也没有关于写的SQL.可以说是典的
- 描述返回表达式,此表达式已被格式化为日期或时间。语法FormatDateTime(Date[, NamedFormat])FormatDat
- 本文实例讲述了Selenium定位元素操作。分享给大家供大家参考,具体如下:Selenium是一个用于Web应用程序测试的工具。Seleni
- 首先获取ip:<% userip=Request.ServerVariables(&qu
- 一、多层索引1.创建环境:Jupyterimport numpy as npimport pandas as pda=pd.DataFram