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");

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

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

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中,$listeners已经被废弃了,$listeners$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>

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

参考:透传 Attributes[1]

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

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

通常我们会封装一个Dialog组件来解耦业务,这个时候直接将Dialog作为根元素,然后可以将v-modelwidth属性透传到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>

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

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

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

总结

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

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

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

相关文章

AI大模型 向量Embeddings+向量数据库实现文搜文、图搜图

文搜文、图搜图介绍: 文搜文 &#xff1a;即文本搜索文本&#xff0c;是指通过输入关键词或短语&#xff0c;在大量文本数据中检索出与之相关的内容 。 搜 索引擎&#xff08;百度、谷歌、 360 &#xff09; 、 文档管理系统 、 电商搜索 。 图搜图 &#xff1a;即图像搜…

从零开始搭建一个node.js后端服务项目

目录 一、下载node.js及配置环境 二、搭建node.js项目及安装express框架 三、集成nodemon&#xff0c;实现代码热部署 四、Express 应用程序生成器 一、下载node.js及配置环境 网上很多安装教程&#xff0c;此处就不再赘述了 版本信息 C:\Users\XXX>node -v v20.15.0…

IDEA Sping Boot 多配置文件application Maven动态切换

新建application-dev.yml与application-prod.yml pom.xml文件下添加profiles等 让idea识别出配置文件 <profiles><profile><id>dev</id><properties><!-- 环境标识&#xff0c;需要与配置文件的名称相对应 --><profiles.active>dev&…

【系统架构设计师】案例专题六(8大系统架构设计之7): 安全架构设计考点梳理

更多内容请见: 备考系统架构设计师-核心总结目录 文章目录 一、安全架构概述2、信息安全面临的威胁2、安全架构的定义和范围3、与信息安全相关的国内外标准及组织二、安全模型1、状态机模型2、Bell-LaPadula模型3、Biba模型4、Clark-Wilson模型5、Chinese Wall模型三、系统安全…

欧科云链研究院深掘链上数据:洞察未来Web3的隐秘价值

目前链上数据正处于迈向下一个爆发的重要时刻。 随着Web3行业发展&#xff0c;公链数量呈现爆发式的增长&#xff0c;链上积聚的财富效应&#xff0c;特别是由行业热点话题引领的链上交互行为爆发式增长带来了巨量的链上数据&#xff0c;这些数据构筑了一个行为透明但与物理世…

(32)噪声信号的时域分析:均值、方差、与功率

文章目录 前言一、生成噪声信号并画图二、计算信号的均值、方差、与功率三、结果分析 前言 本文对叠加了高斯白噪声的一段整周期余弦信号进行时域分析&#xff0c;使用MATLAB进行信号生成&#xff0c;并计算其均值、方差、与功率。最后给出对计算结果的分析&#xff0c;阐明均…

小程序该如何上架

小程序的上架流程通常包括准备工作、代码审核、人工审核以及上线发布等关键步骤。以下是一个详细的小程序上架指南&#xff1a; 一、准备工作 注册开发者账号&#xff1a; 在微信小程序平台或支付宝开放平台等相应的小程序发布平台上注册开发者账号。 开发小程序&#xff1a; …

开源新生活,社区齐乐活:COSCon'24 社区合作和开源集市招募中,诚邀广大社区参与!...

一年一度的开源盛会&#xff0c;COSCon24第九届中国开源年会暨开源社10周年嘉年华&#xff0c;将于11月2-3日&#xff0c;在北京•中关村国家自主创新示范区展示中心召开&#xff01;本次大会的主题是&#xff1a;「Open Source&#xff0c;Open Life | 开源新生活」&#xff0…

git error: You have not concluded your merge (MERGE_HEAD exists).

本地作了修改并提交远程&#xff0c;但管理员并未合并。此时本地又作了修改&#xff0c;而管理员合并了其它分支&#xff0c;且这个合并分支同时修改了当前本地分支共同的文件。本着提交前同步最新远程代码的原则&#xff0c;结果在合并远程分支时冲突了。其实解决这个冲突再合…

电脑无线网wifi和有线网同时使用(内网+外网同时使用)

一、要求 我这里以无线网wifi为外网&#xff0c;有线网卡为内网为例&#xff1a; 一、基本信息 无线wifi&#xff08;外网&#xff09;&#xff1a;ip是192.168.179.235&#xff0c;网关是192.168.179.95有线网&#xff08;内网&#xff09;&#xff1a;ip是192.168.10.25&…

C语言实现输出空心数字金字塔

如下图所示&#xff0c;那么&#xff0c;该怎么实现呢 #include <stdio.h>void hallow(int n);int main(void) {int n;printf("请输入一个数");scanf("%d",&n);hallow(n);return 0; }void hallow(int n) {int i,j,k1;for (i 1; i <n-1; i) {…

网络爬虫自动化Selenium模拟用户操作

自动化测试和网络爬虫在现代软件开发中占据着重要的位置。它们通过自动化用户操作,减少了人工重复操作的时间成本。Selenium作为一个功能强大且应用广泛的自动化工具,不仅能在不同的浏览器中运行自动化测试,还能进行跨平台测试,并允许与多种编程语言集成。本教程将介绍如何…

Java面向对象编程--高级

目录 一、static关键字 1.1 静态变量 1.2 静态内存解析 1.3 static的应用与练习 二、单例设计模式 2.1 单例模式 2.2 如何实现单例模式 三、代码块 3.1 详解 3.2 练习&#xff0c;测试 四、final关键字 五、抽象类与抽象方法 5.1 abstract 5.2 练习 六、接口 6.…

以JavaScript的学习角度看Axios,并以spring boot+vue3为例具体分析实现

什么是Axios Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于在浏览器和 后端 中发送异步的 HTTP 请求。它功能强大、易用&#xff0c;常用于与 API 交互&#xff0c;发送 GET、POST、PUT、DELETE 等请求。 Axios 的主要特点&#xff1a; 支持 Promise Axios 基于 …

连接redis哨兵碰到的一些问题

1.Could not get a resource from the pool 可以跟进对应的getResource方法&#xff0c;看下这个问题的具体异常是什么&#xff0c;如NOAUTH Authentication required&#xff0c;这种异常就是说明了漏配置了redis的密码&#xff0c;补充下就好。 2. java.lang.NoSuchMethodE…

【花卉识别系统】Python+卷积神经网络算法+人工智能+深度学习+图像识别+算法模型

一、介绍 花朵识别系统。本系统采用Python作为主要编程语言&#xff0c;基于TensorFlow搭建ResNet50卷积神经网络算法模型&#xff0c;并基于前期收集到的5种常见的花朵数据集&#xff08;向日葵、玫瑰、蒲公英、郁金香、菊花&#xff09;进行处理后进行模型训练&#xff0c;最…

SpringBoot基础(一)

5.注解Configuration 标注一个类为配置类 6.注解Bean 用Bean标注方法等价于XML中配置的bean Configuration //容器启动时加载 public class AppBootConfig {//创建bean实例 别名为stuBean(name "stu")public Student getStudent(){Student stu new Student();s…

GitHub简介与安装使用入门教程

1、Git与GitHub的简介 Git是目前世界上最先进的分布式控制系统&#xff0c;它允许开发者跟踪和管理源代码的改动历史记录等&#xff0c;可以将你的代码恢复到某一个版本&#xff0c;支持多人协作开发。它的核心功能包括版本控制、分支管理、合并和冲突解决等&#xff0c;其操作…

PHP系统中502 的原因及解决方法

在PHP系统中&#xff0c;502错误通常表示网关错误&#xff0c;即服务器作为网关或代理&#xff0c;从上游服务器收到无效响应。这种错误可能由多种原因引起&#xff0c;以下是一些常见的原因及相应的解决方法&#xff1a; 原因及解决方法 PHP-FPM进程问题 进程崩溃&#xff1a…

【原创】java+springboot+mysql疫苗追踪管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…