封装一个vue3的公共组件

在Vue 3中,封装公共组件的场景包括但不限于以下几种情况:

  • 重复使用的组件:如果你发现某个组件在多个地方重复使用,那么将其封装成公共组件是很有意义的。比如,页面中的各种表单控件(输入框、下拉框、日期选择器等)经常可以被封装成公共组件。

  • 业务无关的通用组件:当有一些组件是业务无关的,并且可以在不同的项目中重复使用时,将其封装成公共组件。比如各种Loading、提示框、消息提示等。

  • 复杂组件的拆分:有些复杂的组件可以被拆分成若干公共组件,每个公共组件承担不同的责任,这样做不但提高了可维护性,也方便了代码的重用。

  • 提高可维护性:封装公共组件可以提高代码的可维护性和可读性。通过组件封装,将业务逻辑和UI组件分离,使得代码结构更加清晰。

  • 标准化UI风格:封装公共组件有助于保持一致的UI风格。例如,如果你希望所有的表单输入框都具有相同的风格和交互行为,那么可以封装一个通用的表单输入框组件。

这里使用的场景是重复使用的组件:定义一个公共的快递组件选择,首先在项目的src下面定义一个文件夹components,然后在里面创建文件ExpressList.vue。
在这里插入图片描述
ExpressList.vue文件里面的代码

<template><div class="expressValue-list"><el-select v-model="expressValue" class="w-220" placeholder="请选择" @change="changeExpress"><el-option label="全部" value="" v-if="isAll" /><el-option v-for="(item, index) in expressList" :key="item.id" :value="isId ? item.id : item.code" :label="item.name" /></el-select></div>
</template>
<script setup >
import { onBeforeMount, ref, watch } from "vue" 
const expressList = ref([])
const props = defineProps({listValue: [String, Number],isId: {default: false,type: Boolean}, //是否需要id传默认falseisAll: {default: false,type: Boolean},//是否开启查找全部功能,默认false//可以加其它任何根据项目需要的条件,上面的只是举例
})
const emits = defineEmits(['update:listValue']);
const expressValue = computed({get: () => { return props.listValue },set: newVal => emits('update:listValue', newVal)
});
const changeExpress = (value) => {expressValue.value = value
}
//这里真实项目掉接口获取
const getExpress = () => { expressList.value =    [{"id": "1","code": "YD","name": "韵达速递",},{"id": "2","code": "ZTO","name": "中通快递",},{"id": "3","code": "SF","name": "顺丰速运",},{"id": "4","code": "YTO","name": "圆通速递",},{"id": "5","code": "YZPY","name": "邮政快递包裹",},{"id": "6","code": "STO","name": "申通快递",},{"id": "7","code": "JD","name": "京东快递",},{"id": "8","code": "EMS","name": "EMS",},{"id": "9","code": "HTKY","name": "百世快递",},{"id": "10","code": "JTSD","name": "极兔速递",},{"id": "11","code": "DNWL","name": "丹鸟",},{"id": "12","code": "EMS","name": "邮政电商标快",},{"id": "13","code": "SF","name": "顺丰快运",}]
}
onBeforeMount(() => {getExpress()
})
</script><style lang="scss" scoped>
.expressValue-list {
.w-220{width:220px;
}
</style>

到这里一个基础的下拉选择快递的公共组件模版就完成了,最后那么在项目里面怎么使用呢???
向下面这样使用

//父组件
<template><div class="page"><ExpressList v-model:listValue="express" :isAll="true"/></div>
</template>//express就是双向 绑定的选择下拉框的值//isAll=ture ,开启全部查找的功能

最后看截图
在这里插入图片描述
注 :因为公共组件会在项目里面多次使用,所以可以全局注册组件,这样就不用在项目里面再次引入路径链接了。

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

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

相关文章

MySQL 数据学习笔记速查表(视图、存储过程、事务)

文章目录 十三、视图1、视图是什么&#xff1f;2、视图的特性&#xff1f;3、视图的作用&#xff1f;4、视图的用途&#xff1f;5、视图的使用&#xff1f;1、基本语法2、创建视图3、调用视图4、视图练习(1) 利用试图简化复杂的联结(2) 利用视图重新格式化检索出的数据(3) 利用…

Django详细教程(一) - 基本操作

文章目录 前言一、安装Django二、创建项目1.终端创建项目2.Pycharm创建项目&#xff08;专业版才可以&#xff09;3.默认文件介绍 三、创建app1.app介绍2.默认文件介绍 四、快速上手1.写一个网页步骤1&#xff1a;注册app 【settings.py】步骤2&#xff1a;编写URL和视图函数对…

npm发布自己的插件包

发布npm包 新建文件目录例如npm-test&#xff0c;目录中打开命令行初始化package.json文件 npm init name&#xff1a;作为发布包的名字 version&#xff1a;版本号 main&#xff1a;入口文件名 {"name": "name202403311748","version": "…

Node爬虫:原理简介

在数字化时代&#xff0c;网络爬虫作为一种自动化收集和分析网络数据的技术&#xff0c;得到了广泛的应用。Node.js&#xff0c;以其异步I/O模型和事件驱动的特性&#xff0c;成为实现高效爬虫的理想选择。然而&#xff0c;爬虫在收集数据时&#xff0c;往往面临着诸如反爬虫机…

OSPF-基础、虚链路、overflow,缺省

OSPF 1、OSPF基础 2、区域内的路由计算 3、区域间的路由计算&#xff08;矢量&#xff09;&#xff08;区域间的防环原则&#xff09; 3.1、非骨干区域都与骨干区域相连。 3.2、骨干区域不会接收非骨干的3类LSA。 3.3、无论COST&#xff0c;1类LSA总是由于3类LSA。 ABR&…

如何读毛选

原因 这就涉及到mx该怎么读这个问题。拿起书来&#xff0c;凭着一股子热情&#xff0c;就一页页往下读可行吗&#xff1f;我想大概会半途而废&#xff0c;原因有二。 其一&#xff0c;mx中蕴含的思想是具有恒久价值的&#xff0c;但一定的思想必须通过一定的文字表达出来&#…

我爱我缓慢向上的勇气

勇气的觉醒 曾经&#xff0c;我也像许多人一样&#xff0c;害怕失败&#xff0c;害怕被人嘲笑&#xff0c;害怕面对困难。每当遇到挑战&#xff0c;我的内心就会充满恐惧和犹豫。但是&#xff0c;随着时间的推移&#xff0c;我逐渐意识到&#xff0c;这些恐惧和犹豫并不能帮助…

数据结构--稀疏数组

package com.dhu.sparsearray;public class SparseArrsy {public static void main(String[] args) {int chessArr1[][] new int[11][11];chessArr1[1][2] 1;chessArr1[2][3] 2;chessArr1[3][4] 11;System.out.printf("原始二维数组");for (int[] row : chessArr…

快消企业数字化转型实战解析:探寻未来增长新动力

2024年&#xff0c;快消行业正站在数字化转型的风口浪尖。 “今年是过去十年最差的一年&#xff0c;但却可能是未来十年最好的一年。”这句话几乎成为了今年的流行语。 但是这句话是情绪&#xff0c;不是事实。未来十年&#xff0c;中国会成为全球最大的消费品市场&#xff0…

[Pytorch]:PyTorch中张量乘法大全

在 PyTorch 中&#xff0c;有多种方法可以执行张量之间的乘法。这里列出了一些常见的乘法操作&#xff1a; 总结&#xff1a; 逐元素乘法&#xff1a;*ortorch.mul()矩阵乘法&#xff1a;ortorch.mm()ortorch.matmul()点积&#xff1a;torch.Tensor.dot()批量矩阵乘法&#xff…

北方经贸经济类知网收录月刊投稿发表论文

《北方经贸》期刊是由国家新闻出版总署批准&#xff0c;黑龙江省教育厅主管&#xff0c;黑龙江省经济管理干部学院主办的经济类综合期刊。期刊融理论性、知识性、实践性于一体&#xff0c;立足龙江&#xff0c;辐射全国&#xff0c;面向世界&#xff0c;注重研究解决重大现实理…

C++消息队列的基本实现

在C中&#xff0c;并没有直接提供消息队列&#xff08;Message Queue&#xff09;的标准库实现。但是&#xff0c;你可以使用std::queue与std::mutex&#xff08;或std::lock_guard&#xff09;、std::condition_variable等工具自己实现一个简单的线程安全消息队列。以下是一个…

vulnhub靶机: DC-9

dc-9靶机下载 将靶机设置为NAT模式&#xff0c;本次实验使用的内网网段为192.168.198.0/24&#xff0c;kali的ip为192.168.198.172 信息搜集 ip主机扫描&#xff1a; nmap -sP 192.168.198.0/24 确定靶机ip为192.168.198.171 主机端口扫描&#xff1a; nmap -T4 -A -v 192…

python基础——模块【模块的介绍,模块的导入,自定义模块,*和__all__,__name__和__main__】

&#x1f4dd;前言&#xff1a; 这篇文章主要讲解一下python基础中的关于模块的导入&#xff1a; 1&#xff0c;模块的介绍 2&#xff0c;模块的导入方式 3&#xff0c;自定义模块 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&#xff1a;C语言入门基…

嵌入式开发中,通过终端控制芯片GPIO电平

echo 204 > /sys/class/gpio/export 这个命令是在 Linux 系统中用于向 GPIO&#xff08;通用输入输出&#xff09;子系统注册一个 GPIO 引脚。GPIO 是一种用于与外部设备通信的通用硬件接口&#xff0c;可以通过读写 GPIO 引脚的状态来与外部设备进行通信&#xff0c;如传感…

大数据面试专题 -- kafka

1、什么是消息队列&#xff1f; 是一个用于存放数据的组件&#xff0c;用于系统之间或者是模块之间的消息传递。 2、消息队列的应用场景&#xff1f; 主要是用于模块之间的解耦合、异步处理、日志处理、流量削峰 3、什么是kafka&#xff1f; kafka是一种基于订阅发布模式的…

通过SSH在苹果手机上查看系统文件:远程访问iOS文件系统的方法

​ 目录 引言 用户登录工具和连接设备 查看设备信息&#xff0c;电池信息 查看硬盘信息 硬件信息 查看 基带信息 销售信息 电脑可对手机应用程序批量操作 运行APP和查看APP日志 IPA包安装测试 注意事项 引言 苹果手机与安卓手机不同&#xff0c;无法直接访问系统文件…

python基于django协同算法的个性化音乐推荐系统的设计与实现

本个性化音乐推荐系统以Django作为框架&#xff0c;b/s模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块&#xff1a;首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;歌曲类型管理&#xff0c;明星歌手管理&#xff0c;歌曲音乐管理&#xff0c;歌曲…

权限提升技术:攻防实战与技巧

本次活动赠书1本&#xff0c;包邮到家。参与方式&#xff1a;点赞收藏文章即可。获奖者将以私信方式告知。 网络安全已经成为当今社会非常重要的话题&#xff0c;尤其是近几年来&#xff0c;我们目睹了越来越多的网络攻击事件&#xff0c;例如公民个人信息泄露&#xff0c;企业…

【Jenkins】关于账号,证书验证的设置问题

当你的电脑启动了Jenkins&#xff0c;这时候一定要小心更改管理员账号和密码~~~ 当你的电脑启动了Jenkins&#xff0c;这时候一定要小心更改管理员账号和密码~~~ 当你的电脑启动了Jenkins&#xff0c;这时候一定要小心更改管理员账号和密码~~~ 重要的事情说3遍&#xff0c;如…