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


猜你喜欢
- 一、QtDesigner介绍Qt Designer 是一款GUI界面工具,可以实现将UI设计界面转为Python代码的工具;二、安装 QTd
- 1、什么是GIL全局解释器锁GIL:Global Interpreter Lock,意思就是全局解释器锁,这个GIL并不是Python的特性
- 1. 鼠标的哪个按键被点击?<html><head><script type="text/javas
- 运行以下代码: Dim com As ADODB.Command Dim rst
- 特征选择时困难耗时的,也需要对需求的理解和专业知识的掌握。在机器学习的应用开发中,最基础的是特征工程。——吴恩达1.数据预处理数据预处理需要
- Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又
- 有些时候我们需要得到刚刚插入数据库中的条目id,用于相关系统的更改,在以前我是使用select+top 1+desc 这种笨方法实现的,在没
- 最近对微格式进行了一些学习,在学习过程中收获不少。在此分享下,欢迎交流!微型格式的优点:1,语义化的HTML和CSS类名称来标记共同内容。2
- 有时我们会碰到类似下面这样的 unicode 字符串:u'\xe4\xbd\xa0\xe5\xa5\xbd'这明显不是一个正
- asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim
- 本文实例为大家分享了微信小程序实现简单计算器与秒表的具体代码,供大家参考,具体内容如下实验内容:任务一:实现一个简单的加减乘除运算。首先输入
- 代码如下:--程序员们在编写一个雇员报表,他们需要得到每个雇员当前及历史工资状态的信息, --以便生成报表。报表需要显示每个人的晋升日期和工
- 一、前言班花加我说她电话坏了让我看看,那肯定义不容辞!【兴奋了半个小时】没别的我就想秀一下技术!五分钟后我修好了,电脑重启之后显示输入密码,
- pipenv 是Kenneth Reitz大神的作品,能够有效管理Python多个环境,各种包。过去我们一般用virtualenv搭建虚拟环
- JavaScript使用if () { ... } else { ... }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如
- sqlx是Golang中的一个知名三方库,其为Go标准库database/sql提供了一组扩展支持。使用它可以方便的在数据行与Golang的
- 对于变量的访问和设置,我们可以使用get、set方法,如下:class student: def __init__(self,n
- 前言Logistic回归涉及到高等数学,线性代数,概率论,优化问题。本文尽量以最简单易懂的叙述方式,以少讲公式原理,多讲形象化案例为原则,给
- 先上一波战果:证明脚本是有用的~好在前两天看到有大佬在 Github 上开源了一个抢茅台的脚本目前已经 1.4k ,我前一天看的时候才 50
- 如下所示:screen.widthscreen.heightscreen.availHeight //获取去除状态栏后的屏幕高度screen