当前位置: 首页 > 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;例如"猫"的词向量会靠近…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...