Vue3中ElementPlus组件二次封装,实现原组件属性、插槽、事件监听、方法的透传

本文以el-input组件为例,其它组件类似用法。
请添加图片描述

一、解决数据绑定问题

封装组件的第一步,要解决的就是数据绑定的问题,由于prop数据流是单向传递的,数据只能从父流向子,子想改父只能通过提交emit事件通知父修改。
父:

import { ref } from 'vue'
import CInput from '@/components/CInput/index.vue'

const name = ref<string>('')
<c-input v-model:value="name"/>

子组件:

import { ref, computed } from 'vue';
const props = withDefaults(defineProps<{
    value: string;
}>(), {
    value: ''
})
const inputValue = computed({
    get: () => props.value,
    set: (value: string) => emit('update:value', value)
})
<el-input
   v-model="inputValue" 
></el-input>

以上即可实现父子之前数据的双向传递。
但在Vue3.4+版本中,新增了defineModel() ,这个宏可以用来声明一个双向绑定 prop,通过父组件的 v-model 来使用:const model = defineModel()。同样实现了父子组件数据的双向绑定。感兴趣的同学可以看下官网解释,其有更多用法。

二、属性、事件监听

在vue3版本中,“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。
例如el-input组件上有许多属性,clearable、show-word-limit、show-password、@input、@focus等等,这些肯定不需要通过props传递给子组件,那就是通过$attrs来进行传递。
在子组件封装时,编写:

<el-input 
    v-model="inputValue"
    v-bind="$attrs" 
>
</el-input>

当然对于你二次封装的组件,根据你的业务需要,直接固定一些属性。
这样,在父组件中,我们可以像使用el-input组件一样,使用我们自己的组件传递属性和监听事件。

<c-input ref="nameRef" class="name-input" v-model:value="addForm.name" @input="handleInput" clearable/>

三、插槽传递

对于ElementPlus中的组件,通常都会都一些插槽,那我们封装后想保留这些插槽的使用,该如何写?Vue3为我们提供了$slots,里面存着父组件所传入插槽的对象。所以我们可以这样写:

<el-input 
   ref="input"
   class="c-input" 
   v-model="inputValue" 
   :placeholder="props.label" 
   v-bind="$attrs" 
>
   <template v-for="(_, name) in $slots" v-slot:[name]>
       <slot :name="name"></slot>
   </template>
</el-input>

这样,在父组件中我们可以正常使用el-input中所带有的插槽:

<c-input v-model:value="loginForm.account" :label="$t('input.username')" clearable>
   <template #prefix>
       <el-icon><User /></el-icon>
   </template>
</c-input>

四、原组件方法获取并暴露

最后一步,在父组件中想通过绑定ref调用el-input的方法,该如何写?首先父组件直接调用肯定是不行的,因为封装的组件中并没有这些方法,这些方法是挂在封装的el-input的实例对象上的。所以,解决办法就是我们通过在子组件中获取到这些方法,然后通过defineExpose向父组件暴露就行了。
子组件:

import { ref, onMounted, defineExpose } from 'vue';
import type { InputInstance } from 'element-plus';

const input = ref<InputInstance>()
const inputMethods = ref({})

onMounted(() => {
    const refMethods = Object.entries(input.value).filter(([_, value]) => value instanceof Function)
    refMethods.forEach(([key, value]) => {
        inputMethods.value[key] = value
    })
})
defineExpose(inputMethods.value)

<el-input 
   ref="input"
   class="c-input" 
   v-model="inputValue" 
   :placeholder="props.label" 
   v-bind="$attrs" 
>
   <template v-for="(_, name) in $slots" v-slot:[name]>
       <slot :name="name"></slot>
   </template>
</el-input>

这样,父组件中获取该组件的实例对象上就会存在这些方法了。完美解决!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/360133.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JavaEE】网络原理:UDP数据报套接字编程和TCP流套接字编程

目录 1.UDP数据报套接字编程 1.1 DatagramSocket 1.2 DatagramPacket 1.3 InetSocketAddress 1.4 基于UDP实现回响服务器 2.TCP流套接字编程 2.1 ServerSocket 2.2 Socket 2.3 基于TCP实现回响服务器 1.UDP数据报套接字编程 API 介绍 1.1 DatagramSocket DatagramS…

Transformer 自然语言处理(三)

原文&#xff1a;Natural Language Processing with Transformers 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第八章&#xff1a;使 transformers 在生产中更高效 在之前的章节中&#xff0c;您已经看到了 transformers 如何被微调以在各种任务上产生出色的结果。…

[机器学习]TF-IDF算法

一.TF-IDF算法概述 什么是TF-IDF&#xff1f; 词频-逆文档频率&#xff08;Term Frequency-Inverse Document Frequency&#xff0c;TF-IDF&#xff09;是一种常用于文本处理的统计方法&#xff0c;可以评估一个单词在一份文档中的重要程度。简单来说就是可以用于文档关键词的提…

k8s 1.29 一键安装脚本, 丝滑致极

博客原文 文章目录 集群配置配置清单集群规划集群网络规划 环境初始化主机配置 安装脚本需要魔法的脚本不需要魔法的脚本配置自动补全加入其余节点 验证集群 高可用版本: 高可用 k8s 1.29 一键安装脚本 集群配置 配置清单 OS&#xff1a; ubuntu 20.04kubernetes&#xff1a;…

“国潮风”带火年货消费,新中式服装在抖音电商销量同比增长超21倍

1月31日&#xff0c;抖音电商发布“抖音商城好物年货节”数据报告&#xff0c;展现龙年春节年货市场消费趋势及大众购买偏好。数据显示&#xff0c;1月13日至28日&#xff0c;货架场抖音商城日均GMV比去年年货节增长了98%&#xff0c;年货节电商直播累计时长达4385万小时&#…

Next.js如何正确处理跨域问题?

以前一直使用Vue来写前端。去年下半年接手了一个基于React Next.js的项目&#xff0c;于是顺带学习了一下Next.js。由于Next.js的特点&#xff0c;这个项目的前后端是放在一起的。一开始没什么问题&#xff0c;看了半天文档就上手了。 上周我们需要在另一个网页项目中&#x…

添加了gateway之后远程调用失败

前端提示500&#xff0c;后端提示[400 ] during [GET] to [http://userservice/user/1] 原因是这个&#xff0c;因为在请求地址写了两个参数&#xff0c;实际上只传了一个参数 解决方案&#xff1a;加上(required false)并重启所有相关服务

单元/集成测试服务

服务概述 单元/集成测试旨在证明被测软件实现其单元/架构设计规范、证明被测软件不包含非预期功能。经纬恒润测试团队拥有丰富的研发经验、严格的流程管控&#xff0c;依据ISO26262/ASPICE等开展符合要求的单元测试/集成测试工作。 在ISO 26262 - part6 部分产品开发&#xff…

最全前端 HTML 面试知识点

一、HTML 1.1 HTML 1.1.1 定义 超文本标记语言&#xff08;英语&#xff1a;HyperTextMarkupLanguage&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言 HTML元素是构建网站的基石 标记语言&#xff08;markup language &#xff09; 由无数个…

解读4篇混合类型文件Polyglot相关的论文

0. 引入 Polyglot文件指的是混合类型文件&#xff0c;关于混合类型文件的基础&#xff0c;请参考文末给出的第一个链接&#xff08;参考1&#xff09;。 1. Toward the Detection of Polyglot Files 1.1 主题 这篇2022年的论文&#xff0c;提出了Polyglot文件的检测方法。虽…

git操作之本地代码修改后想回退成当前最新版本

这张图很关键&#xff0c;取自https://www.cnblogs.com/cblx/p/12467083.html 我们的vscode就是workspace&#xff0c;我们提交代码需要三步&#xff0c;add&#xff0c;commit&#xff0c;push&#xff0c;其中我们想拉取代码有两种方式&#xff0c;git pull或者git fetch/cl…

QCM6125 UEFI XBL显示开机Logo不居中

QCM6125 UEFI XBL显示开机Logo在竖直方向不是居中显示,如果显示屏是正向安装到产品的话可能没有什么问题,但是如果产品的显示屏是90、180、270度旋转后安装到产品上的话显示开机Logo会有一些问题,并且大多数的平台以及产品开机Logo都是水平竖直方向都是居中显示,所以修改成…

【开源操作系统】上海道宁为您带来稳定、安全、开源和易用的操作系统——Ubuntu,为您的数字化生活保驾护航

Ubuntu是 源于非洲的一种传统价值观 意为“人性、关爱和共享” 这种价值观在 开源、稳定、安全、易用的 Ubuntu操作系统中 得到了完美的体现 除此之外&#xff0c;Ubuntu还具有 强大的安全性 它自带了诸多安全功能 如防火墙、加密文件系统等 可以有效地保护用户的隐私…

uniapp基于Android平台的校园生活服务交流论坛系统(二手,失物招领 -跑腿) 小程序hbuiderx

作为一款APP的校园论坛系统&#xff0c;面向的是大多数学者&#xff0c;软件的界面设计简洁清晰&#xff0c;用户可轻松掌握使用技巧。在调查之后&#xff0c;获得用户以下需求&#xff1a; &#xff08;1&#xff09;用户注册登录后&#xff0c;可进入系统解锁更多功能&#x…

【Java基础】之进程与线程

进程与线程 1. 线程与进程1.1 概念1.2 区别与联系 2. 线程的5种状态和切换2.1 简单介绍2.2 状态切换2.2.1 重点情况 3. 线程中常见的方法4. 线程池 1. 线程与进程 1.1 概念 进程&#xff1a;资源分配的基本单元&#xff0c;如QQ音乐 线程&#xff1a;资源调度的基本单元&…

第38期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

泰迪智能科技生成式人工智能(AIGC)实验室解决方案

AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;生成式人工智能&#xff09;是一种新的人工智能技术&#xff0c;指的是利用人工智能技术来生成内容。这种技术可以自动生成文本、图像、音频和视频等多种类型的内容&#xff0c;而且内容的质量较高&…

Python武器库开发-武器库篇之pdf文件暴力破解(五十二)

Python武器库开发-武器库篇之pdf文件暴力破解(五十二) PDF&#xff08;Portable Document Format&#xff0c;便携式文档格式&#xff09;是由Adobe公司开发的一种文件格式。PDF文件被广泛用于以可靠方式共享和传输电子文档。它能够保留文档的原始格式&#xff0c;包括字体、图…

基于YOLOv8的船舶目标检测系统(Python源码+Pyqt6界面+数据集)

博主简介 AI小怪兽&#xff0c;YOLO骨灰级玩家&#xff0c;1&#xff09;YOLOv5、v7、v8优化创新&#xff0c;轻松涨点和模型轻量化&#xff1b;2&#xff09;目标检测、语义分割、OCR、分类等技术孵化&#xff0c;赋能智能制造&#xff0c;工业项目落地经验丰富&#xff1b; …

KYOSAN电源维修RFK150ZDTG1电源控制器BKW-100

维修范围&#xff1a;刻蚀、RIE、平行板、ICP、pecvd、射频溅射、CVD 和PVD等系统&#xff0c;工业系统中感应加热和电介质加热设备的电源&#xff0c;烘干、塑化、接、硅晶体生长和平板显示器领域应用电源&#xff0c;直流偏压和硬镀膜&#xff0c;信息技术设备(ITE)及轻工业系…