普通插槽、具名插槽、作用域插槽
创始人
2025-05-31 00:42:25

插槽

插槽就是子组件提供给父组件的占位符，用slot来表示，父组件可以在这个占位符中填充各种的模板代码。

为什么要使用插槽？

你可能不太明白为什么要给子组件传入HTML而不是直接写在子页面中内，如果出现这种情况，你有五个子页面这五个子页面只有一小部分内容不一样。你会怎么做呢？最笨的办法就是复制代码，但在Vue中更加简便的方法就是插槽。

插槽的分类：

普通插槽、具名插槽、作用域插槽

普通插槽

子组件son.vue：

父组件

具名插槽

具名插槽就是每个插槽带有自己的名字，在父组件中用到v-slot,也可以直接缩写为#

子组件：

父组件

作用域插槽

作用域插槽可以传递参数。

子组件

父组件

在这里插入图片描述

动态插槽

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名.

子组件：

父组件：

img

总结

slot又名插槽，是Vue的内容分发机制，组件内部的模板弓|擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示，以及怎么显示是由父组件决定的。

slot又分三类,默认插槽，具名插槽和作用域插槽。

  • 默认插槽:又名匿名插槽，当slot没有指定name属性值的时候一个默认插槽，一个组件内只有一个匿名插槽。
  • 具名插槽:带有具体名字的插槽， 也就是带有name属性的slot, 一个组件可以出现多个具名插槽。
  • 作用域插槽:默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理:当子组件vm实例化时，获取到父组件传入的slot标签的内容,存放在vm. $slot中，默认插槽为vm. $slot .default，具名插槽为vm. $slot.xxx , xx为插槽名，当组件执行渲染函数时候,遇到slot标签,使用$slot 中的内容进行替换，此时可以为插槽传递数据,若存在数据，则可称该插槽为作用域插槽。

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Go语言必知必会100问题-02 减少代码的嵌套层数

下一篇：HJ31 单词倒排

相关内容

热门资讯

Mysql常用数据类型总结 整形 枚举类型ENUE整形       TINYINT,SMALLINT,MEDIUMINT,IN...
【flink sql】创建表 flink sql创建表语法 CREATE TABLE [IF NOT EXISTS] [catal...
python opencv 保... 👨‍💻个人简介： 深度学习图像领域工作者 dz...
Pytorch深度学习实战3-... 目录1 数据集Dataset2 数据加载DataLoader3 常用预处理方法4 模型处理5 实例&...
自定义类型的超详细讲解ᵎᵎ了解...   目录 1.结构体的声明 1.1基础知识 1.2结构体的声明 1.3结构体的特殊声明  1.4结构...
Docker等容器技术如何与移... 移动应用程序的开发面临着很多挑战，包括开发环境的设置、测试的困难、部署的复杂性等。由于...
【微服务】—— Nacos安装... 文章目录1. Windows安装1.1 下载安装包1.2 解压1.3 端口配置1.4 启动1.5 访...
【OpenGL】 为了理解这个函数我们需要先学习一些OpenGL的内容 OpenGL可视化 https://g...
hjr-详细说一下Redis集... Redis作用 缓存 一般我们用Redis做缓存，热点数据 击穿：访问到...
【蓝桥杯】 C++ 数字三角形... 文章目录题目描述输入描述输出描述实现代码解题思路注意点知识点 题目描述 上图给出了一个数字三角形。从...
VR全景展会丨探索未来，重塑现... 随着科技的不断发展，虚拟现实（VR）技术逐渐成为一个重要的...
C++数据类型 目录 C++基础数据类型 指针 指针类型 指针赋值 引用 参考：《深...
超实用!!! 三分钟将你的项目... 文章目录前言一、在项目中新增配置二、配置github page setting？三、如...
数据结构---队列 专栏：数据结构 个人主页：HaiFan. 专栏简介：这里是...
数字操作方法 系列文章目录 前端系列文章——传送门 JavaScript系列文章——传送门 文章目录系列文章目录...
Cartesi 2023 年 ... 查看 Cartesi Machine、Cartesi Rollups 和 Noether 的更新正在...
JavaWeb——jsp概述入... JSP定义:  在如下一个jsp文件里面有如下的代码  <%@ page content...
一切喜怒哀乐都来自于你的认知 01 有个学子，准备出国，父母请来清华的教授宁向东。请问教授࿱...
JAVA并发编程——synch... 引言         Java语言为了解决并发编程中存在的原子性、可见性和有序性问题，...
git学习----3.21 未... 文章目录前言Git ：一个分布式版本控制工具目标一、概述1.1 开发中的实际场景1.2...
Qt优秀开源项目之十七：QtP... QtPromise是Promises/A+规范的Qt/C++实现。该规范的译...
【前端八股文】JavaScri... 文章目录Set概念与arr的比较属性和方法并集、交集、差集Map概念属性和方法String用索引值和...
海康硬盘录像机接入RTSP/o... EasyNVR安防视频云服务平台可支持设备通过RTSP/Onvif协议接入平台，能提供...
在混合劳动力时代如何避免网络安... 在混合劳动力时代如何避免安全网络风险 三年多来，混合工作一直是工作生活中不可或缺的一...
2023还不懂Jmeter接口... 这里介绍的Jmeter接口测试的的实战，如果文章内容没遇看懂的话，我这边...
基于4G/5G弱网聚合的多链路... 基于4G/5G多卡聚合(弱网聚合)的智能融合通信设备技术亮点 增强带宽提供可靠连接 通过将多个有线和...
如何使用Synplify综合v... 文章目录使用Synplify综合的好处synplify的教程方法1（无效）...
2023年全国最新高校辅导员精... 百分百题库提供高校辅导员考试试题、辅导员考试预测题、高校辅导员考试真题、辅导员证考试题库等ÿ...
2022年18个值得期待的Le... 有数百个独特的LearnDash附加组件，您可能很难选择您的LearnDash LMS...
【java基础】Stream流... 文章目录基本介绍流的创建流的各种常见操作forEach方法filter方法map方法peek方法fl...