Vue2——5

自定义指令

自己定义的指令, 可以封装一些 dom 操作, 扩展额外功能

使用

指令的值

在绑定指令时,可以通过"等号"的形式为指令绑定具体的参数值

通过 binding.value 可以拿到指令值,指令值修改会触发update函数

插槽

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

默认插槽

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

使用组件时, 组件标签内部, 传入结构替换slot

默认插槽只能改变一处

后备内容(默认值)

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

具名插槽

组件内有多处结构,需要外部传入标签,进行定制时可以使用具名插槽

多个slot使用name属性区分名字

template配合v-slot:插槽名(可以简化成 #插槽名) 来分发对应标签

作用域插槽

作用域插槽是 Vue.js 中一种强大的组件通信机制,允许子组件向父组件传递数据 ,并让父组件在渲染时动态使用这些数据。它解决了普通插槽无法访问子组件数据的限制。

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

给slot以添加属性的方式传值

slot会将所有值放在一个对象里

通过template绑定对应插槽来接受传过来的对象 obj为自定义名字

相关推荐
a努力。4 分钟前
LangChain Agent消息链路全解析
java·前端·javascript
今年下半年7 分钟前
【前端】ant-design-vue 表格「行、列都动态」的处理方案
前端·javascript·vue.js
程序员yu12 分钟前
会编网络:别被入门教程骗了,Python实用能力不在语法本身
开发语言·python·学习·算法
Bruce_Liuxiaowei26 分钟前
Python 字典默认值完全指南:从 KeyError 到 defaultdict
开发语言·数据结构·python·字典
troy12838 分钟前
Java 技术栈全景指南:从基础到微服务的完整知识体系
java·开发语言·微服务
Escalating_xu42 分钟前
【C 语言】深入理解指针(2):数组名、数组传参、二级指针与指针数组
java·c语言·开发语言
郝学胜-神的一滴43 分钟前
游戏引擎原理与实践 01:聊聊游戏引擎的前世今生
开发语言·c++·游戏引擎·产品运营·软件工程·产品经理·untiy
szarron1 小时前
VNA6 便携式矢量网络分析仪|1MHz‑6.3GHz 手持 VNA 真实应用场景全解析
前端·嵌入式硬件·信息可视化·数据挖掘·数据分析
Reisentyan1 小时前
B站首页,点击视频卡片之后首页自动刷新的问题
前端
默_笙1 小时前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript