Vue-2.8插槽

插槽分为默认插槽(组件内定制一处结构)、具名插槽(组件内定制多处结构)

作用域插槽不属于以上,只是插槽的一个传参语法

默认插槽

作用:让组件内部的一些结构支持自定义

需求:要在页面中显示一个对话框,封装成一个组件

问题:组件的内容部分,不希望写死,希望能使用的时候自定义。

插槽基本语法:

1.组件内需要定制的结构部分,改用<slot></slot>占位

2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot

后备内容(默认值)

通过插槽完成了内容的定制,传什么显示什么,但是如果不传,则是空白

插槽后备内容:封装组件时,可以为预留的'<slot>'插槽提供后备内容(默认内容)。

语法:在<slot>标签内,放置内容,作为默认显示内容

效果:外部使用组件时,不传东西,则slot会显示后备内容;传东西,则后备内容被替代。

具名插槽

一旦插槽起了名字,就是具名插槽,只支持定向分发

需求:一个组件内有多处结构,需要外部传入标签,进行定制

默认插槽:一个的定制位置

语法:

3.v-slot:插槽名可以简化为#插槽名

作用域插槽

定义slot插槽的同时是可以传值的。给插槽上可以绑定数据,将来使用组件时可以用。

场景:封装表格组件

1.父传子,动态渲染表格内容

相关推荐
卸任10 小时前
Vibe coding工具使用心得
前端·ai编程
brien911 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance11 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M11 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写12 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李12 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易12 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding12 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马12 小时前
前沿视界
前端
kyriewen12 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员