[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 小时前
鸿蒙应用开发:Refresh + List 下拉刷新组件使用教程
前端·华为·harmonyos
Hilaku3 小时前
为什么大厂对前端算法要求极高?
前端·javascript·程序员
你可如意3 小时前
从Promise开始,一篇让你彻底建立起JS的异步编程模型
javascript
Tkto3 小时前
我用 WebGL 从「画个点」一路画到「贪吃蛇」
前端
xiaobaoyu3 小时前
前端代码常用规范
前端
吃好睡好便好3 小时前
MATLAB中图像的读取、写入和显示
开发语言·图像处理·学习·计算机视觉·matlab
xiaobaoyu3 小时前
img,word,excel,pdf文件在线预览
前端
lichenyang4533 小时前
从 H5 到 HarmonyOS:我做了一个 npm + OHPM 双端发布的 ArkWeb JSBridge 框架
前端
用户84298142418103 小时前
AI时代,JS混淆加密还有用吗?
前端·javascript
xiaobaoyu4 小时前
如何理解前端项目中的绝对路径和相对路径
前端