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

相关推荐
成旭先生3 分钟前
企业全景信息查询 API:工商照面 33 项、股东出资、变更与社保一次查全
java·开发语言·api接口·企业信息查询·工商数据·风控尽调·供应商准入
2601_962885723 分钟前
批量取数比循环单取快多少?用 AlphaFeed klines.batch给多股票取数提速
开发语言·php·batch
广州华水科技6 分钟前
单北斗GNSS变形监测系统在城市安全与地质灾害中的应用前景
前端
动词ing7 分钟前
【C语言题目练习】算法 整数反转
c语言·开发语言·算法
颜进强9 分钟前
20 · NestJs循环依赖与 forwardRef:容器为什么在环面前会死,"占位再补齐"怎么救
前端·后端·ai编程
颜进强14 分钟前
19 · NestJs @Global 落地账:装饰器与 `isGlobal` 参数,各在什么场景上岗
前端·后端·ai编程
多弗朗皮卡丘17 分钟前
C++多继承
开发语言·c++·多继承
码艺-Alimjan25 分钟前
Tauri 网站To桌面应用实战总结
前端·javascript·vue
lie..40 分钟前
30天从零开始学AI应用开发(Day 19):项目二完结:RAG 知识库问答系统,把自己攒的资料变成私人顾问
开发语言·人工智能·python
SWAGGY..44 分钟前
【C++进阶】:(7)红黑树的原理与 C++ 实现:结构设计、插入调整及性质验证
android·java·开发语言·c++·算法