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

vue2组件封装和UI组件的二次封装,方法,属性,ref的传递

封装组件使用v-model 

使用方法props接受value值,当值发生变化的时候再通过this.$emit("input", newValue),则实现了简单组件的v-model封装,如果不使用第三方UI可以接受到的值使用watch或者计算属性保存,然后再通过事件派发自己保存的值

$attrs可以透传组件上的属性,如果使用 props接收了某个属性,则从$attrs移除这个属性

代码:如elInput组件

 保存值写法可使用计算属性也可以使用监听器

<template><div class="switchWrap"><el-inputref="refInput"v-bind="$attrs":value="internalValue"@input="updateValue"></el-input></div>
</template><script>
export default {props: {value: [Boolean, String, Number],},data() {return {};},computed: {internalValue() {return this.value;},},methods: {updateValue(newValue) {this.$emit("input", newValue); // 触发内部 input 事件 让父组件可以v-model绑定},},mounted() {},
};</script>

 不保存值可直接派发值

<template><div class="switchWrap"><el-inputref="refInput"v-bind="$attrs":value="value"@input="updateValue"></el-input></div>
</template><script>
export default {props: {value: [Boolean, String, Number],},data() {return {};},computed: {},methods: {updateValue(newValue) {this.$emit("input", newValue); // 触发内部 input 事件 让父组件可以v-model绑定},},mounted() {},
};</script>

 使用方法

 <elInput v-model="value"></elInput >

 UI组件封装方法

 $attrs和$slots可以透传属性和插槽 然后通过解构插槽——>#[插槽名]=value 就可以获取传递的值,再通过遍历组件原型上的方法,然后把原型上的方法放在组件上,就可以使用ref透传

使用计算属性 slotsKeys 和 scopedSlotsKeys

 是为了动态获取父组件传递的具名插槽($slots)和作用域插槽($scopedSlots),

  并根据需要排除掉某些已使用的插槽,以便在渲染时可以有选择地展示插槽内容。

<template><div class="switchWrap"><el-inputref="refInput"v-bind="$attrs":value="value"@input="updateValue"><template v-for="slotName in scopedSlots" #[slotName]="scoped"><slot :name="slotName" v-bind="scoped"></slot></template><template v-for="slotName of namedSlot" v-slot:[slotName]><slot :name="slotName"></slot></template></el-input></div>
</template><script>
export default {props: {value: [Boolean, String, Number],},data() {return {usedSlots: [], // 已使用的插槽};},computed: {// 使用计算属性 namedSlot 和 scopedSlots//  是为了动态获取父组件传递的具名插槽($slots)和作用域插槽($scopedSlots),//  并根据需要排除掉某些已使用的插槽,以便在渲染时可以有选择地展示插槽内容。namedSlot() {return Object.keys(this.$slots).filter((key) => !this.usedSlots?.includes(key));},scopedSlots() {return Object.keys(this.$scopedSlots).filter((key) => !this.usedSlots?.includes(key));},},methods: {updateValue(newValue) {this.$emit("input", newValue); // 触发内部 input 事件 让父组件可以v-model绑定},},mounted() {for (let key in this.$refs.refInput) {if (typeof this.$refs.refInput[key] == "function") {this[key] = this.$refs.refInput[key];}}},
};
</script>

 使用方法

       <inputUi v-model="inputValue" @input="getInfo" ref="refInput"><template #prepend>Http://</template></inputUi>

相关文章:

vue2组件封装和UI组件的二次封装,方法,属性,ref的传递

封装组件使用v-model 使用方法props接受value值&#xff0c;当值发生变化的时候再通过this.$emit("input", newValue)&#xff0c;则实现了简单组件的v-model封装,如果不使用第三方UI可以接受到的值使用watch或者计算属性保存&#xff0c;然后再通过事件派发自己保存…...

喜报!景联文科技成功通过DCMM数据管理能力成熟度二级认证

10月30日&#xff0c;中国电子信息行业联合会公示了新一批DCMM贯标企业&#xff0c;景联文科技成功通过DCMM数据管理能力成熟度二级认证&#xff08;乙方认证&#xff09;。 DCMM是《数据管理能力成熟度评估模型》的简称&#xff0c;是我国在数据管理领域首个正式发布的国家标准…...

从壹开始解读Yolov11【源码研读系列】——Data.dataset.py:模型训练数据预处理/YOLO官方数据集类——YOLODataset

【前情回顾】在上一篇文章记录了YOLO源码data目录下的 base.py 文件&#xff0c;其中定义了一个可灵活修改的数据加载处理基类——Class BaseDataset 灵活基类博文地址&#xff1a;https://blog.csdn.net/qq_58718853/article/details/143249295 【实验代码】所有实验代码上传至…...

C语言初阶必会的练习题(3)之位操作符(^ 、、>>等)的应用

C语言初阶必会的练习题&#xff08;3&#xff09; 放在最前面的1、不允许创建临时变量&#xff0c;交换两个整数的内容1.1、分析&#xff1a;见代码注释&#xff08;a&#xff09;方法 1&#xff08;b&#xff09;方法 2 1.2、结果展示方法 1 的 结果&#xff1a;方法 2 的 结果…...

MongoDB面试专题33道解析

大家好&#xff0c;我是 V 哥。今天给大家分享 MongoDB的道 V 哥原创的面试题&#xff0c;收藏起来&#xff0c;一定会对你有帮助。 V 哥推荐&#xff1a;2024 最适合入门的 JAVA 课程 1. 你说的 NoSQL 数据库是什么意思&#xff1f;NoSQL 与 RDBMS 直接有什么区别&#xff1f…...

Laravel 安全实践:如何防止 XSS 攻击

在当今的网络环境中&#xff0c;应用程序的安全性越来越受到开发者和企业的重视。跨站脚本攻击&#xff08;XSS&#xff09;是常见的网络安全威胁之一&#xff0c;它通过在目标网站上注入恶意脚本&#xff0c;窃取用户信息或执行恶意操作。作为流行的 PHP 框架&#xff0c;Lara…...

《Java Web 开发》

一、引言 在当今数字化时代&#xff0c;Web 应用程序已经成为人们生活和工作中不可或缺的一部分。Java Web 开发作为一种广泛应用的技术&#xff0c;以其强大的功能、稳定性和可扩展性&#xff0c;在企业级应用开发中占据着重要地位。本文将深入探讨 Java Web 开发的各个方面&a…...

Vector和ArrayList

Vector和ArrayList都是Java集合框架中的动态数组实现类&#xff0c;它们之间存在一些显著的区别。以下是对Vector和ArrayList的详细比较&#xff1a; 一、线程安全性 Vector&#xff1a;是线程安全的&#xff0c;即多线程情况下&#xff0c;Vector可以保证容器的同步性。Vect…...

关于我、重生到500年前凭借C语言改变世界科技vlog.16——万字详解指针概念及技巧

文章目录 1. sizeof 和 strlen1.1 sizeof1.2 strlen 2. 数组和指针结合的试题深入解析2.1 一维数组2.2 字符数组代码1代码2代码3代码4代码5代码6 2.3 二维数组 3.指针运算的试题深入解析题1题2题3题4题5题6题7 希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力…...

开发更便利!迅为RK3568/RK3588 定制分区镜像发布

目前迅为所维护的Linux SDK一直延续RK官方默认分区结构&#xff0c;而迅为另维护了的一套定制分区结构的SDK&#xff0c;两种不同的分区结构都有着各自的特性&#xff0c;RK默认分区镜像和定制分区镜像对比如下所示&#xff1a; rk传统分区适合启动速度要求高且硬件配置固定的系…...

基于Springboot的学生宿舍管理系统的设计与实现-计算机毕设 附源码 26991

基于Springboot的学生宿舍管理系统的设计与实现 摘 要 学生宿舍管理系统在高校管理中具有重要的作用&#xff0c;为提高宿舍管理效率和服务质量&#xff0c;本文基于Springboot框架开发了一款学生宿舍管理系统。该系统主要分为管理员、学生用户和宿管用户三类角色&#xff0c;每…...

Spring Mvc中拦截器Interceptor详解

一、概述 拦截器常用于在请求处理的不同阶段插入自定义逻辑。Spring MVC的拦截器作用是在请求到达控制器之前或之后进行拦截&#xff0c;可以对请求和响应进行一些特定的处理。如&#xff1a; 登录验证&#xff1a;对于需要登录才能访问的网址&#xff0c;使用拦截器可以判断…...

【go从零单排】Strings and Runes 字符串和字符

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 概念 在Go语言中&#xff0c;rune 是一个内置的数据类型&#xff0c;用于表示一个Unicode字符。它实际上是一个别名…...

django Forbidden (403)错误解决方法

存在问题&#xff1a; django提交请求时&#xff0c;报403错误&#xff1b; 解决方案&#xff1a; 在form表单中加{% csrf_token %} <h1>用户登录</h1><form me method"post" ac action"/login/">{% csrf_token %}<input type"t…...

pdmaner连接sqlexpress

别以为sqlserver默认的端口总是1433 案例 有台sqlserver2008 express服务器&#xff0c;刚安装&#xff0c;支持混合模式登录&#xff0c;其它什么配置也没改。 先看用ADO连接 这说明&#xff1a; 案例中sqlserver端口不是1433 &#xff01;&#xff01;&#xff01;ADO连接…...

如果编译不通过,且感觉代码没有问题,大概率就是中文引起的问题

一、如果中文乱码&#xff1a;彻底解决Qt中文乱码以及汉字编码的问题(UTF-8/GBK)_qt 中文乱码-CSDN博客 二、如果中文正常&#xff0c;编译还是有莫名其妙的问题 1、设置编码为 UTF-8(带BOM)。&#xff08;如果下方没有出现“高级保存选项”&#xff0c;只需要修改一下代码&…...

java反序列化学习之CommonCollections3利用链的学习

一、前言 在前文中&#xff0c;我们学习了Java的类加载过程&#xff0c;类加载器以及Java中加载字节码的一些方法&#xff0c;其中介绍了TemplatesImpl&#xff0c;TemplatesImpl是一个可以加载字节码的类&#xff0c;通过调用其newTransformer()方法&#xff0c;即可执行这段字…...

超详细:Vue入门

Vue(发音为 /vjuː/&#xff0c;类似 view)是近些年比较流行的前端框架之一&#xff0c;和 React、Angular 并称为前端三大框架。其中 Vue 简单易学的特点成为国内主流&#xff0c;很多公司已经把它列为一 个前端开发人员必须要掌握的技术点了。 Vue 简介 Vue2.x官网 Vue3.x …...

基础网络安全知识

1.ctfhub技能树 1.1 Web-SQL注入 Web-SQL注入-整数型 && 字符型 && MySQL结构 参考&#xff1a;5.9.6MySql注入 Web-SQL注入-报错注入 step1: 查库名 ?id1 and extractvalue(1,concat(0x7e,database(),0x7e))-- step2: 查看表名 ?id1 and extractvalue(1…...

大语言模型工作原理笔记

大语言模型工作原理笔记 一、词向量&#xff1a;表示语言的方式 大语言模型使用词向量来表示单词&#xff0c;每个词向量是由一串数字组成的列表&#xff0c;代表词空间中的一个点。词空间中&#xff0c;含义相近的词位置更接近&#xff0c;例如"猫"的词向量会靠近…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...