vue 中插槽的三种类型

vue中的slot主要分三种：匿名插槽，具名插槽，作用域插槽

一，匿名插槽：

语法：<slot></slot>

1.没有为插槽指定名称

2.通过slot标签可以添加匿名插槽

3.在使用组件的时候，组件中的内容会填充到所有匿名插槽的位置，所以在封装组件的时候，匿名插槽一般只有一个

4.匿名插槽可以设置默认的内容，如果没有传入内容就使用默认内容，如果传入了，就会进行覆盖

二，具名插槽

语法：<slot name="名称"></slot>

1.为slot设置名字的插槽就称为具名插槽

2.一个封装组件中可以有多个具名插槽

3.使用：通过template标签指定内容所放置的插槽名称

4.使用简写：v-slot:名字或者 #名字

定义具名插槽：

使用具名插槽：

三，作用域插槽

在封装组件的过程中，可以为预留的插槽绑定 props 数据(除了name)，这种带有 props 数据的叫做“作用域插槽"

<div><h1>作用域插槽</h1><!-- 作用域插槽需要设置name属性在子组件中通过v-bind的方式设置属性1.如果是固定值，就直接写2.如果是变量，就v-bind myname：是定义的key的名称，这个名称后期与接收数据时的名称一致username:当前封装组件中的数据变量--><slot name='ok':myname='username'age='20':hobby='hobby'>我要传递用户名给父组件</slot>
</div>

使用作用域插槽：在使用包含作用域插槽的组件时，可以使用 v-slot: 插槽名称 的形式，接收作用域插槽对外提供的数据

<dataSlot><!-- 传递过来的数据是一个对象，所以可以解构的方式获取数据 --><!-- <template v-slot:ok='obj'> {myname:'jack'...}--><template v-slot:ok='{myname,hobby}'><p>{{myname+"---"+hobby}}</p><p>{{myname}}</p><p v-for='(v,i) in hobby':key='i'>{{v}}</p></template>
</dataSlot>

vue 中插槽的三种类型相关推荐

vue中template的三种写法
第一种(字符串模板写法):直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. 第二种:直接写在template标签里,这 ...
vue中$refs的三种用法
我们都知道,在vue2中获取DOM元素,可以直接在元素上绑定ref属性,然后获取到DOM元素的属性值,这种方法在vue3 中仍然可以使用,但也会有一些问题.下面就介绍$refs的三种用法: 1.vue ...
java中三种转string的方法_java中int,char,string三种类型的相互转换
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将 ...
html5中标签分为,HTML标签的三种类型
HTML标签的类型分为三种:行内元素,行内块元素,块级元素而标签的属性是可以转换的 display:inline: 转换为行内元素 display:linline-block 转换为行内块元素 di ...
mysql double 转字符串_没想到！在MySQL数据库中的数据有这三种类型！
MySQL数据库是一个或多个数据列构成二维表,它的每一种数据列都有特定类型,而类型决定MySQL是怎么看待该列数据,如果把整型数值存放到字符类型的列中,MySQL则会把它当成字符串来处理. MySQL ...
java将一个整数按字节输出_在java中的整数类型有四种，分别是 byte short int long 其中byte只有一个字节 0或1，在此不详细讲解。其他的三种类型如下：1、...
在java中的整数类型有四种,分别是 byte short int long 其中byte只有一个字节 0或1,在此不详细讲解. 其他的三种类型如下: 1. 基本类型:short 二进制位数:16 ...
c语言实现进程隐藏和保护,C/C++程序开发中实现信息隐藏的三种类型
无论是模块化设计,还是面向对象设计,还是分层设计,实现子系统内部信息的对外隐藏都是最关键的内在要求.以本人浅显的经验,把信息隐藏按照程度的不同分成(1)不可见不可用(2)可见不可用(3)可见可用. 1 ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
关于ACL和NAT技术（内含PC服务器常见三种类型介绍与通配符掩码简介）
目录 PC服务器常见三种外形介绍(硬盘尺寸相关知识普及) 一.塔式服务器二.刀片式服务器三.机架式服务器四.硬盘尺寸 ACL 一.ACL概述及其组成 1.ACL的概述及技术背景 2.ACL的组成 ...

vue 中插槽的三种类型

vue 中插槽的三种类型相关推荐

最新文章

热门文章