当前位置: 首页 > news >正文

ui组件二次封装(vue)

组件二次封装的意义

  • 保证一个系统中ui风格和功能的一致性
  • 便于维护

从属性、事件、插槽、ref这几方面考虑

  • 属性和事件的处理:ui组件上绑定$attrs(v-model本质也是一个属性加一个事件,所以也在其列)

在自定义组件中打印$attrs:父组件传递过来的所有属性和事件 - 自定义组件本身定义的属性和事件。

  • 插槽的处理:循环$slots设置ui组件插槽,并定义同名自定义组件插槽

在自定义组件中打印$slots:父组件中设置的插槽对象(键值对)

  • ref的处理(如果在自定义组件上使用ref,大概率是想用ui组件里的方法)

将ui组件实例的所有属性都放到自定义组件上

完整例子

子组件:
<template><el-input ref="elInput" v-bind="$attrs"><template v-for="(_, name) in $slots" #[name]= "scopeData"><slot :name="name" v-bind="scopeData"></slot></template></el-input>
</template>
mounted() {for (const key in this.$refs.elInput) {this[key] = this.$refs.elInput[key]}
}
----------------------------------------------------
父组件:
<my-input ref="wrapRef" v-model="inputVal" maxlength="5"><template #prefix>prefix</template>
</my-input>
data() {return {inputVal: '123'}
},
mounted() {this.$refs.wrapRef.focus()
}
http://www.dtcms.com/a/181874.html

相关文章:

  • Android 关闭Activity切换过渡动画
  • uniapp-商城-50-后台 商家信息
  • C++ 命令模式详解
  • .Net Mqtt协议-MQTTNet(一)简介
  • Ubuntu22.04怎么退出Emergency Mode(紧急模式)
  • 【许可证】Open Source Licenses
  • 两个数组的交集(暴力、set、哈希)
  • 【C++】红黑树
  • [RoarCTF 2019]Easy Calc1
  • 怎么免费下载fbx格式模型、和blender格式文件模型,还可以在线编辑修改
  • MySQL的Order by与Group by优化详解!
  • 算法-贪婪算法
  • 【Web前端开发】HTML基础
  • 服务器机架的功能和重要性
  • 【Java学习】枚举(匿名类详解)
  • akshare爬虫限制,pywencai频繁升级个人做量化,稳定数据源和券商的选择
  • 软考(信息系统运行管理员)
  • 介绍一下synchronized锁升级过程
  • 设计模式【cpp实现版本】
  • 不同环境下运行脚本如何解决pythonpath问题
  • 【 Redis | 实战篇 缓存 】
  • 非阻塞式IO-Java NIO
  • tryhackme——Enumerating Active Directory
  • Github 2025-05-10 Rust开源项目日报 Top10
  • Webug4.0通关笔记25- 第30关SSRF
  • 【Android】文件分块上传尝试
  • vue注册用户使用v-model实现数据双向绑定
  • Kotlin 协程 vs RxJava vs 线程池:性能与场景对比
  • Spring boot 简单开发接口
  • 超详细fish-speech本地部署教程