[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 ---> #

相关推荐
计算机魔术师2 分钟前
实测GPT-6 Astra后,我发现过去十年的专业门槛正在失效
前端
虎头金猫6 分钟前
Pic Smaller 本地部署:压缩图片、转换格式,再搭建自己的 Web 工具
运维·前端·开源·aigc·ai编程·ai写作
hunterandroid6 分钟前
Android ANR 排查实战:从线上告警到主线程卡点定位
android·前端
reasonsummer7 分钟前
【办公类-115-01】20260906育儿知识(家园小报)批量制作(2026年9月-2027年6月)
开发语言·数据库·c#
君顾17 分钟前
智慧场馆解决方案小程序系统实战:从架构设计到上线指南
java·开发语言·智慧场馆
zhougl9968 分钟前
Dockerfile实战教程
java·开发语言·spring boot
FfHUCisI16 分钟前
Golang 网络轮询器 netpoll:把阻塞 IO 变成事件通知
开发语言·网络·golang
XiaoQiao66699916 分钟前
C 语言常用头文件及里面核心函数
c语言·开发语言
statistican_ABin18 分钟前
中国宠物经济发展分析报告——基于R语言的2018-2024年宠物市场多维度分析
开发语言·r语言·宠物
图扑软件22 分钟前
下篇・换墨|主题/多语言/移动端,一套组件全覆盖
前端·javascript·ui·性能优化·数据可视化