关键词：
参考技术A实际开发的时候，为了减少重复造轮子，提高工作效率，节省开发时间成本， 免不了会使用 ui 组件库，比如在 web 前端很受欢迎的 element-ui 。但有的时候，我们需要在原组件的基础上做些改造，比如一个 image 组件， 我们需要统一在图片加载失败的时候展示的特定图，每次使用组件都加一遍， 麻烦耗时，关键是维护成本高，当需要更新这个加载出错的图片时， 得再次一个个去找到使用该组件的地方修改。
再例如自定义分页组件也很常见，组件的样式，默认支持的每页数目， 封装之后再用，在可维护性和开发效率上都很有好处。
然而也不至于从0开始写一个分页组件，在原有基础上封装就好， 那么如何快速优雅的封装一个第三方组件库的组件呢？ v-bind="attrs" 和 v−on="attrs" 和 v-on="attrs" 和 v−on="listeners"="$listeners" ，会给我们带来惊喜。它们可以使得封装后的组件， “继承”原组件的几乎所有 v-bind 属性和 v-on 事件，且用法和作用与在原组件一样。
封装 el-image 为 custom-image 组件，所有使用 custom-image 展示图片的地方， 图片加载过程中都会统一展示 “加载中...” 的提示，且当加载出错时，会展示统一的默认图。下面是一个 custom-image 组件加载过程以及加载出错的效果
v-bind="$attrs" 的妙用是在创建更高级别的组件，在封装第三方组件时，
可以自动将在父作用域中使用的 v-bind 的属性自动绑定，
并向下传入被封装的使用了 v-bind="$attrs" 的组件。
一段摘自 vue 官网的介绍
例如我们封装的 custom-Image 组件，使用了 v-bind="$attrs" 之后，我们在 custom-Image 组件中，也拥有了 el-image 的几乎所有属性， 而且其作用效果和用法，是和我们使用 el-image 是一样的，也就说我们可以看着 el-image 的文章去使用 custom-Image 。
v-on="listeners" 的作用和用法与 v−bind="listeners" 的作用和用法与 v-bind="listeners" 的作用和用法与 v−bind="attrs" 类似，它可以将父作用域中的使用 v-on 的时间监听器向下传入到使用了 v-on="listeners" 组件中，和 v−bind="listeners" 组件中，和 v-bind="listeners" 组件中，和 v−bind="attrs" 的功效类似，只不过一个属性一个是事件。还是 custom-Image 组件为例，这时候 custom-Image 组件就拥有了 el-image 组件的几乎所有事件。而且其作用效果和用法，是和我们使用 el-image 是一样的。
使用 custom-Image 组件的示例
springjdbc的优雅设计-异常封装（下）(代码片段)
...己封装JDBC异常的骚操作。这一次咱们来看看Spring是如何优雅的封装的。从哪看起呢？这里不得不提一下蘑菇君看源码的思路：第一步，打开IDE，打开Spring源码第二步，打开手机，刷刷抖音，看看NBA新闻... 查看详情
python中更优雅的记录日志
参考技术A在以往我们使用日志，更多的是使用python自带的logging模块，它可以设置错误等级、输出方式等。但使用方式相对比较复杂，想要更好的使用需要如log4net一样单独配置，这在python中感觉不是很优雅。下面介绍一个python库... 查看详情
vue如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用(代码片段)
目录一、$attrs二、$listeners一、$attrs我们在使用组件的过程中，有时需要给被封装的子组件传递Prop例如：<template><el-inputv-model="innerVal"placeholder="placeholder"@input="$emit('input',$event)">... 查看详情
2022-06-16pycharm的下载与安装使用
一、Pycharm软件简介产品简介PyCharm是一种PythonIDE（IntegratedDevelopmentEnvironment，集成开发环境），带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具，比如调试、语法高亮、项目管理、代码跳转、智能提示、自动完... 查看详情
封装vue组件的一些技巧(代码片段)
...，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。本文整理了开发Vue组件的一些技巧，包含大量代码示例。开发环境vue-cli 查看详情
如何在vuejs中优雅使用javascript各种插件
在日常开发中，为了敏捷开发或者更快满足业务需求，不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中，最简单的办法是通过将其附加到 window 对象... 查看详情
vue选择性刷新组件&如何实现优雅的刷新页面
在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。列举个场景，比如修改... 查看详情
elementplus二次封装一个input
...法，相对于Object.defineProperty的劫持，proxy代理的方式更为优雅。 查看详情
两种方式封装retrofit+协程，实现优雅快速的网络请求(代码片段)
目的简单调用、少写重复代码不依赖第三方库（只含Retrofit+Okhttp+协程）完全不懂协程也能立马上手（模板代码）用Kotlin的方式写Kotlin代码，什么意思呢？对比一下下面2个代码就知道了：mViewModel.w... 查看详情
在vue中优雅的使用localstrong
h5的LocalStrong帮我们缓存一些数据到本地，最常用的使用场景，比如京东购物在未登陆的状态下，把商品加入购物车，收藏某个商品。当我们把url复制到另外一个浏览器，购物车就是空的。以下是一个简单的商品收藏小demo,让我们... 查看详情
vue3使用mapstate
参考技术A如何在Vue3中更方便快捷地获取Vuex中state中的多个值假设在state存在值，需要全部获取页面中展示2.Vue3中提供了useStore()进行获取。但不能直接像Vue2那样通过mapState()进行一次性获取多个值，只能一次获取一个封装使用 查看详情
教你一步步封装vue的toast和loading组件
参考技术A我们在项目中都会用到toast,loading加载器。特别是在进行移动端的项目开发的时候，进行异步操作的时候去等待，在必要的时候用toast给用户提示。在app开发中，iOS有成熟的MBProgressHUD插件等等。在web前端也有很多第三方... 查看详情
2022.06.16jrebel中文用户名启动失败的解决办法
参考技术AIDEA：2021.3JRebel：2022.2.2原路径：C:\Users\XXX\AppData\Roaming\JetBrains\IntelliJIdea2021.3\plugins\jr-ide-idea拷贝到：D:\JRebel\jr-ide-idea然后设置JRebelAgent，设置为原路径：C:\Users\XXX.jrebel拷贝到：D:\JR... 查看详情
springjdbc的优雅设计-异常封装（上）(代码片段)
JDBC里的异常之痛在上一篇文章SpringJDBC的优雅设计-数据转换的开头，蘑菇君提到过，用原生JDBC操作数据库，需要自己处理各种异常，很让人头秃。（啥玩意儿？不了解JDBC里的异常？还不快去看JavaJDBC的... 查看详情
vue-自定义组件双向绑定(代码片段)
...用组件化开发的vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。 Tab自定义组件首先来看 查看详情
springjdbc的优雅设计-异常封装（下）(代码片段)
...己封装JDBC异常的骚操作。这一次咱们来看看Spring是如何优雅的封装的。从哪看起呢？这里不得不提一下蘑菇君看源码的思路：第一步，打开IDE，打开Spring源码第二步，打开手机，刷刷抖音，看看NBA新闻... 查看详情
优雅的在vue中使用typescript
引言近几年前端对TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript是JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了JS在大型应用开发中的不足。在单独学习TypeScript时，你会感觉很多概... 查看详情
vue数据请求axiosvsfetch(代码片段)
...ipt提供的数据请求ajax(四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高)fetch(本身结合了Promise,并且已经做好了封装，可以直接使用)使用格式：使用别人封装好的第三方库目前最流行的，使用率最高的是ax... 查看详情