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

相关推荐
weixin199701080162 分钟前
[特殊字符]《二手ERP × 闲鱼消息驱动架构:正向+逆向交易消息如何驱动WMS出库与回传》(附Python源码)
开发语言·python·架构
晴天1610 分钟前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs10 分钟前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
galaxy_strive18 分钟前
Qt C++插件化编写项目(1)
开发语言·c++·qt
见叶之秋29 分钟前
【C++】C++ 核心进阶(一):泛型编程基石 —— 模板初阶与 STL 体系开篇
开发语言·c++
Escalating_xu30 分钟前
【Makefile 进阶】从自动发现源文件、模式规则到目录分离与多模块递归构建
linux·开发语言
smileNicky36 分钟前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
Csvn37 分钟前
类型驱动开发(Type-Driven Development):让类型约束先行为导向
前端
计算机魔术师38 分钟前
AI 代理把德国维基当留言板,OpenAI 闷声几周才承认
前端
艾莉丝努力练剑39 分钟前
【AI大模型接入SDK】Gemini模型接入知识体系
java·开发语言·网络·人工智能·网络协议·学习·http