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

相关推荐
小码哥_常5 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒5 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水5 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
拾贰_C5 小时前
【Google | Gemini | API | POST】怎么使用Google 的Gemini API (原生版)
开发语言·lua
t***5446 小时前
如何在Dev-C++中选择Clang编译器
开发语言·c++
橙子199110166 小时前
Java 基础相关
java·开发语言
coderyi6 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅6 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试
科雷软件测试6 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python