[Vue]插槽

插槽

1.作用

让组件内部的一些 结构 支持 自定义

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分,不希望写死 ,希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分,改用**<slot></slot>**占位

  2. 使用组件时, **<MyDialog></MyDialog>**标签内部, 传入结构替换slot

  3. 给插槽传入内容时,可以传入纯文本、html标签、组件

5.插槽-后备内容(默认值)

封装组件时,可以为预留的 <slot> 插槽提供后备内容(默认内容)。

在 <slot> 标签内,放置内容, 作为默认显示内容

6.插槽-具名插槽

  • 多个slot使用name属性区分名字

  • template配合v-slot:名字来分发对应标签

  • v-slot写起来太长,vue给我们提供一个简单写法 v-slot ---> #

相关推荐
大圣编程1 小时前
Java 多维数组详解
java·开发语言
DianSan_ERP4 小时前
电商架构演进:如何在高并发场景下实现多平台API的标准化履约?
运维·前端·网络·安全·架构·自动化
殳翰4 小时前
下服务器端开发流程及相关工具介绍(C++)
开发语言·c++
落寞的星星4 小时前
这个对象就包含了已经转换好的DFA和各种词法分析器运转所需要的参数。下一步,我们就可以用ScannerInfo对象创建出Scanner对象,请看下面的代码:
开发语言·c#
nothing&nowhere5 小时前
用 Python 做问卷数据清洗:无效样本检测与处理实战
开发语言·python·数据清洗·数据处理·问卷星·问卷星脚本·刷问卷
2601_961593425 小时前
Rust 开发环境配置繁琐?RustRover 开箱即用搞定编码调试
开发语言·后端·macos·rust
HZZD_HZZD6 小时前
DL/T 645-2026新国标深度解读与智能电表协议适配实战:从帧结构变化到Java采集器升级的全链路改造方案
java·开发语言
碎_浪7 小时前
给键盘党的英语记忆工具:我做了一款「打字背单词」桌面应用
前端·程序员·ai编程
阿成学长_Cain8 小时前
Linux dirs命令详解|Bash目录堆栈管理快速切换目录实战教程
linux·运维·前端·数据库
多加点辣也没关系8 小时前
JavaScript|第4章:类型转换
开发语言·javascript