Vue3组件封装技巧与心得

在这里插入图片描述

摘要:

日常开发中,用Vue组件进行业务拆分,代码解耦是一个很好的选择;

今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得,希望能够帮助到大家;

1. 组件特性:

在Vue中组件是一个独立的实例,每个组件都有共通点,就是:属性插槽事件方法

在日常我们使用第三方组件库的时候,组件库的文档都会说明上面四个特性,而组件封装就是围绕这四个特性进行的;

2. 组件封装:

2.1 组件继承

很多情况下,我们会在一个组件的基础上进行扩展,这个时候就需要用到组件继承;

在Vue2的时候,我们可以使用extends关键字进行组件继承,

但是在Vue3中,extends关键字已经被废弃了;

在Vue3中,如果想要实现组件继承其实很简单,要明白一个组件其实就是一个js对象,我们可以直接将一个组件对象合并

然后注册成一个新的组件;

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus, { ElInput } from "element-plus";
import "element-plus/dist/index.css";
import { merge } from "lodash";const app = createApp(App);
app.use(ElementPlus);// 组件继承,将ElInput组件的placeholder属性默认值改为"请输入"
app.component("ElInput",merge(ElInput, {props: {placeholder: {default: "请输入"}}})
);app.mount("#app");

这里直接使用了lodash的merge方法,将ElInput组件的props属性进行了合并,然后覆盖注册成了一个新的组件;

因为有很多小伙伴遇到一个问题就是需要固定ElTable组件的一些属性,比如border、stripe、size等,这个时候用这种方法就非常方便;

2.2 组件插槽

上面的组件继承只是简单的改变了组件的默认属性,但是如果我们想要改变组件的结构,就需要用到组件插槽;

通常情况下我们要拆分组件的业务,然后封装成业务组件,这个时候可能会使用到多个组件;

这个时候组件里面有很多组件,需要替换组件里面的组件里面的插槽,这个时候就需要透传插槽;

<!--  透传插槽  -->
<template><div>区域A这里有一个组件,这个组件需要替换插槽<el-tree :data="treeData"><template v-if="$slots.tree" #default="{ node, data }"><slot name="tree" :node="node" :data="data" /></template></el-tree></div><div>区域B这里有一个组件,这个组件需要替换插槽<el-table :data="tableData"><template v-if="$slots.default"><slot /></template></el-table></div>
</template><script>
export default {data() {return {treeData: new Array(10).fill(0).map((_, index) => ({ label: "label" + index })),tableData: [],};},
};
</script>

通过使用$slots可以获取到组件的插槽,然后通过v-if判断是否有插槽,如果有插槽就进行透传;

除了这种方式之外,还可以使用jsx语法,这种方式更加灵活;

<script lang="jsx">
export default {render() {const areaA = (<div>区域A这里有一个组件,这个组件需要替换插槽<el-tree data={treeData}>{{default: this.$slots.tree}}</el-tree></div>);const areaB = (<div>区域B这里有一个组件,这个组件需要替换插槽<el-table data={tableData}>{{default: this.$slots.default}}</el-table></div>);return (<div>{areaA}{areaB}</div>);}
}
</script>

在setup语法中是没有this的,这个使用需要获取$slots的时候需要使用useSlots方法;

2.3 组件事件和透传 attrs

在Vue2中,我们可以使用$listeners来获取组件的事件,然后进行透传;

而在Vue3中, l i s t e n e r s 已经被废弃了, listeners已经被废弃了, listeners已经被废弃了,listeners和 a t t r s 都被合并到了 attrs都被合并到了 attrs都被合并到了attrs中;

<!-- 组件 -->
<template><div v-bind="$attrs"></div>
</template><!-- 父组件 -->
<template><div><MyComponent class="my-class"@click="handleClick"/></div>
</template>

在Vue3中,我们可以直接使用$attrs来获取组件的事件,然后进行透传;

例如上面的例子,我们可以直接在组件中使用$attrs来获取到class和@click事件,等同于下面的写法;

<!-- 组件 -->
<template><div class="my-class" @click="handleClick"></div>
</template>

但是这里其实有一个小技巧,就是Vue3默认属性是可以透传的,例如上面的例子其实可以简化成下面的写法;

<!-- 组件 -->
<template><div></div>
</template><!-- 父组件 -->
<template><div><MyComponent class="my-class"@click="handleClick"/></div>
</template>

就是组件里面什么都不写,最后在父组件中使用这个组件的时候,属性会透传到组件中的根元素上;

了解这个特性就可以这样封装组件:

<!-- 组件 -->
<template><el-dialog></el-dialog>
</template><!-- 父组件 -->
<template><div><MyComponent v-model="visible"width="500px"/></div>
</template>

通常我们会封装一个Dialog组件来解耦业务,这个时候直接将Dialog作为根元素,然后可以将v-model和width属性透传到Dialog组件上;

这样不需要写Dialog组件开启关闭的双向绑定的代码,前提是不需要在组件内部操作Dialog的开启关闭;

2.4 组件方法

在Vue2中,我们可以通过this.$refs.xxx来获取到组件的实例,然后调用组件的方法;

在Vue3中,我们可以通过ref来获取到组件的实例,然后调用组件的方法;

但是不管是Vue2还是Vue3,在组件内部想要使用组件的子组件的方法都不是一件容易的事情;通常都是手动将组件的实例获取到,然后再重新定义在组件的methods中;

<!-- 组件 -->
<template><div><el-input ref="input" /></div>
</template><script>
export default {methods: {focus() {this.$refs.input.focus();},},
};
</script>

组件的方法通常没有啥特别好的方式,除了我上面的这种方式之外,还有小伙伴是直接将ref返回出去:

<template><div><el-input ref="input" /></div>
</template><script>
export default {methods: {inputRef() {return this.$refs.input},},
};
</script>

当然还有一种偷懒的方式:

<template><div><el-input ref="input" /></div>
</template><script>
export default {mounted() {Object.values(this.$refs.input).forEach((value) => {if (typeof value === 'function') {this[value.name] = (...args) => value(...args);}});},methods: {inputRef() {return this.$refs.input},},
};
</script>

不过这种偷懒的方式只能在options api中使用,因为在composition api中是没有this的;

对于setup语法,如果需要使用组件的方法,可以使用getCurrentInstance来获取到组件的实例,然后将方法挂载到exposed上;

<template><div><el-input ref="input" /></div>
</template><script setup>
import { getCurrentInstance, onMounted, ref } from "vue";const instance = getCurrentInstance();
const input = ref(null);
onMounted(() => {Object.values(input.value).forEach((value) => {if (typeof value === "function") {instance.exposed[value.name] = (...args) => value(...args);}});
});
</script>

这种方式不太稳定,因为exposed是Vue3的一个私有属性,不建议使用;

在setup语法中如果需要暴露组件的内部方法,需要使用defineExpose来暴露;

<script setup>
// ... 省略其他代码defineExpose({focus: () => {input.value.focus();},
});
</script>

3. 总结

这次带来的是Vue3的组件封装的一些技巧,主要是setup语法的一些特性,以及Vue3中的一些奇淫技巧;

Vue3的组件封装相比Vue2来说更加的灵活,但是也更加的复杂,需要我们在使用的时候多加注意;

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析实战—鸢尾花数据分类

1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class&#xff08;种类&#xff09;项中的异常值&#xff0c;其他异常值也同时处理 。 import pandas as pd from sklearn.datasets import load_iris pd.set_option(display.max_columns, N…

【自用】通信内网部署rzgxxt项目_01,后端pipeDemo部署(使用nssm.exe仿照nohup)

做完这些工作之后&#xff0c;不要忘记打开 Windows Server 的防火墙端口&#xff0c;8181、8081、8080、22、443、1521 做完这些工作之后&#xff0c;不要忘记打开 Windows Server 的防火墙端口&#xff0c;8181、8081、8080、22、443、1521 做完这些工作之后&#xff0c;不要…

【Apache Doris】周FAQ集锦:第 26 期

SQL问题 Q1 doris 3.0存算分离模式下&#xff0c;建表的时是否需要指定表的副本数 不需要&#xff0c;指定了也会忽略&#xff1b;存算分离模式下&#xff0c;数据副本由远端存储去管控。 Q2 doris 通过dbeaver查询时报错&#xff1a;[SXXXX]… doris的错误码通常都是EXXXX&…

OpenSSL 心脏滴血漏洞(CVE-2014-0160)

OpenSSL 心脏滴血漏洞(CVE-2014-0160) Openssl简介: 该漏洞在国内被译为"OpenSSL心脏出血漏洞”&#xff0c;因其破坏性之大和影响的范围之广&#xff0c;堪称网络安全里程碑事件。 OpenSSL心脏滴血漏洞的大概原理是OpenSSL在2年前引入了心跳(hearbea0机制来维特TS链接的…

Git实用指南(精简版)

目录 读者须知 Git是什么 Git的原理 文件在Git中的几种状态 快速上手 结尾 读者须知 本文章适合从未接触过git,或者需要深度学习Git的用户进行阅读. 文末有详细的文档,读者可以前往Github下载阅读!!三克油 Git是什么 简单来说,Git是一个代码备份工具,你可以使用指令对…

YOLOv8目标检测(七)_AB压力测试

YOLOv8目标检测(一)_检测流程梳理&#xff1a;YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集&#xff1a;YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型&#xff1a;YOLOv8目标检测(三)_训…

在 Spring Boot 3 中实现基于角色的访问控制

基于角色的访问控制 (RBAC) 是一种有价值的访问控制模型,可增强安全性、简化访问管理并提高效率。它在管理资源访问对安全和运营至关重要的复杂环境中尤其有益。 我们将做什么 我们有一个包含公共路由和受限路由的 Web API。受限路由需要数据库中用户的有效 JWT。 现在用户…

线程知识总结(一)

1、概述 1.1 进程与线程 进程是程序运行时&#xff0c;操作系统进行资源分配的最小单位&#xff0c;包括 CPU、内存空间、磁盘 IO 等。从另一个角度讲&#xff0c;进程是程序在设备&#xff08;计算机、手机等&#xff09;上的一次执行活动&#xff0c;或者说是正在运行中的程…

OpenCV圆形标定板检测算法findGrid原理详解

OpenCV的findGrid函数检测圆形标定板的流程如下: class CirclesGridClusterFinder {CirclesGridClusterFinder(const CirclesGridClusterFinder&); public:CirclesGridClusterFinder

基于SpringBoot+Vue实现的个人备忘录系统

&#x1f384; 写在前面 最近学习vue&#xff0c;所以抽时间就用SpringBootVue做了一个个人备忘录&#xff0c;本意是想打造一个轻量级的、自托管的备忘录中心&#xff0c;可能是老了&#xff08;haha&#xff09;,很多时候都觉得好记性不如烂笔头&#xff0c;所以就有了这个小…

docker简单命令

docker images 查看镜像文件 docker ps -a 查看容器文件 docker rm 0b2 删除容器文件&#xff0c;id取前三位即可 docker rmi e64 删除镜像文件&#xff08;先删容器才能删镜像&#xff09;&#xff0c;id取前三位即可 在包含Dockerfile文件的目录…

【前端】vue数组去重的3种方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数组去重说明二、Vue数组去重的3种方法 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人会主动学习使用一些开发工具&#xff0c;本…

BPMN与一般的流程图区别在那里?

1. 语义和标准性 BPMN&#xff08;业务流程建模符号&#xff09; 基于标准语义&#xff1a;BPMN是一种标准化的业务流程建模语言&#xff0c;拥有一套严谨的语义规范。它由国际对象管理组织&#xff08;OMG&#xff09;维护&#xff0c;定义了事件、活动、网关和流向等元素的确…

《薄世宁医学通识50讲》以医学通识为主题,涵盖了医学的多个方面,包括医学哲学、疾病认知、治疗过程、医患关系、公共卫生等

《薄世宁医学通识50讲》是一门由薄世宁医生主讲的医学通识课程&#xff0c;该课程旨在通过深入浅出的方式&#xff0c;向广大听众普及医学知识&#xff0c;提升公众对医学的认知和理解。 晓北斗推荐-薄世宁医学通识 以下是对该课程的详细介绍&#xff1a; 一、课程概述 《薄世…

二八(vue2-04)、scoped、data函数、父子通信、props校验、非父子通信(EventBus、provideinject)、v-model进阶

1. 组件的三大组成部分(结构/样式/逻辑) 1.1 scoped 样式冲突 App.vue <template><!-- template 只能有一个根元素 --><div id"app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div> </template><script…

操作系统文件管理

一、文件系统 1. 文件的概念 &#xff08;1&#xff09;文件的概念与文件系统 文件是操作系统中的重要概念&#xff0c;是存储在计算机硬盘上的信息集合&#xff0c;如文本文档、图片、程序等。在系统运行时&#xff0c;资源调度和分配以进程为基本单位&#xff0c;而用户的…

【论文研读】U-DiTs:在U型扩散Transformer中引入下采样Token,以更低计算成本超越DiT-XL/2

推荐理由 这篇论文提出了一种新的U型扩散Transformer模型&#xff08;U-DiT&#xff09;&#xff0c;该模型通过对自注意力机制中的查询、键和值进行下采样&#xff0c;有效减少了计算冗余&#xff0c;同时提高了性能。论文中的研究不仅包含理论分析和实验验证&#xff0c;还展…

清远榉之乡托养机构为你深度分析:特殊碳水化合物饮食对自闭症的作用

在探索自闭症干预方法的道路上&#xff0c;各种尝试不断涌现。其中&#xff0c;特殊碳水化合物饮食引起了不少家长的关注。那么&#xff0c;特殊碳水化合物饮食对自闭症究竟有怎样的作用呢&#xff1f;今天&#xff0c;清远榉之乡托养机构为你深度分析。 榉之乡大龄自闭症托养机…

Linux shell脚本用于常见图片png、jpg、jpeg、tiff格式批量转webp格式后,并添加文本水印

Linux Debian12基于ImageMagick图像处理工具编写shell脚本用于常见图片png、jpg、jpeg、tiff格式批量转webp并添加文本水印 在Linux系统中&#xff0c;使用ImageMagick可以图片格式转换&#xff0c;其中最常用的是通过命令行工具进行。 ImageMagick是一个非常强大的图像处理工…

【系统】Windows11更新解决办法,一键暂停

最近的windows更新整的我是措不及防&#xff0c;干啥都要关注一下更新的问题&#xff0c;有的时候还关不掉&#xff0c;我的强迫症就来了&#xff0c;非得关了你不可&#xff01; 经过了九九八十一难的研究之后&#xff0c;终于找到了一个算是比较靠谱的暂停更新的方法&#x…