利用vue3自己实现计数功能组件封装实例利用vue3自己实现计数功能组件

前言
一、封装的意义
二、如何封装？

1. 思路
2. 准备
2. 使用

三、效果演示

总结

前言
本文将带你用vue3自己封装一个实现计数功能的全局组件，其应用场景相信各位一看便知，那就是购物网站中常见的数量选择模块，一起来看看如何实现哇

一、封装的意义

项目中需要用到的地方较多
模块化开发，降低了代码冗余，是开发更加高效
一次封装，到处使用

二、如何封装？

1. 思路

使用vue3中v-model来完成父子组件之间的相互传值，本文章使用vueuse/core中封装好的useVModel来实现这一功能
将需要控制的值从封装的公共组件中抛出去

2. 准备

【利用vue3自己实现计数功能组件封装实例】安装依赖
项目根目录下打开任意终端，执行npm install @vueuse/core@5.3.0
封装全局组件
还是和之前文章做法一样，通过vue插件的方式注册为全局组件
注：本文将封装的全局组件放至src/components下，各位小伙伴儿可以自己决定文件位置及名字
新建文件my-numbox.vue文件
代码如下（示例）：

.my-numbox {display: flex; align-items: center; .notallow {cursor: not-allowed; }.label {width: 60px; color: #999; padding-left: 10px; }.numbox {width: 120px; height: 30px; border: 1px solid #e4e4e4; display: flex; > a {width: 29px; line-height: 28px; text-align: center; text-decoration: none; background: #f8f8f8; font-size: 16px; color: #666; &:first-of-type {border-right:1px solid #e4e4e4; }&:last-of-type {border-left:1px solid #e4e4e4; }}> input {width: 60px; padding: 0 5px; text-align: center; color: #666; }}}

通过vue插件方式注册为全局组件的步骤这里就不给大家演示了，各位可以看一下之前的文章
vue3——自己实现放大镜效果

2. 使用

在任意.vue结尾的文件中使用即可
代码如下（示例）：
组件标签内容会覆盖公共组件中默认插槽中的内容
inventory为库存数量，即用户可以选择数量的最大数值(这里先给一个固定数值，给大家演示一下)