vue界面组件优化

weixin_45339151

于 2021-08-06 14:25:20 发布

阅读量516

点赞数

分类专栏：日常纪录文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45339151/article/details/119454173

版权

本文探讨了在酒店管理系统中遇到的Vue界面组件优化问题，特别是针对select组件的重复代码。通过组件封装，将select优化为独立文件，利用Vue的props、$emit和插槽功能，实现了组件复用，减少了代码量，提高了代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue界面组件优化（封装）

1.select优化

场景：酒店系统中，订单管理、酒店管理、加入分组、加入标签、分组管理、标签管理等等组件都用到了标签选择和分组选择，每个组件中都得写同样的请求逻辑，导致多组件过多重复代码，这个时候可以把那些相同的功能，抽离出来成一个组件，通过组件引用方式来实现就方便省事了，降低代码量，便于后期维护。
在这里插入图片描述

优化方案：将此select单独放到一个文件中，利用父子传参props、子父传参$emit以及插槽来实现

// 在components目录创建一个common目录，然后再其中添加一个tags-group-select.vue文件，集合标签、分组
<template>
  <el-select v-if="selectType === 'tags'" v-model="internalValue" placeholder="请选择标签" filterable clearable style="width: 120px">
    <el-option v-for="item in tagsList" :key="item.id" :label="item.tagDesc" :value="item.tagDesc" />
  </el-select>

最低0.47元/天解锁文章