我终于迈出了第一步——vue组件封装（分离）

大家都知道用vue开发对程序员来说非常棒啦！当然，其实只是因为是现在的主流而已。
当然，对小白我来说，只觉得数据双向绑定有用而已，哈哈哈哈哈！
最近，小白我终于，又上了一个台阶，那就是！终于肯封装组件啦！（注意是肯不是会，因为懒，我不管！）

以前用vue做项目的时候，遇到公共的地方，直接复制粘贴，多好！（一直都觉得复制粘贴最省事，当时的想法：复制粘贴还能多很多行代码–>以前听说程序员的薪水是按代码的行数计算的，想着还可以多点money，精简代码的人怕不是SB哟，跟钱过不去！工作了再想想，我TM莫不是SB哟…）

虽然复制粘贴省事，我还是很喜欢的，但是只是因为前公司没要求，现公司要求公共的就是要提出来。。。于是我痛苦地迈出了我沉重的步伐。因为心里抵触，毕竟我什么都不懂，什么父组件、子组件，还有传值什么的，麻烦死了。

不过，好像操作一遍就知道了。。。。打脸

说正题，我封装的是一个很小很小很小的组件 —— 一个购物车的加减数量的组件

就是这个东西，突然有点不知道该怎么说了，我就直接贴代码好了。。。。

先创建一个新的vue文件，我这边叫Durations.vue，名字也叫Duration，一般我们会把封装的组件放在一个components的文件里面，这里随意，我就直接以文件名为例了吧！

为了方便实时看效果，建议先给文件建一个路由，直接访问路由就好了。

哦对了，忘记说了，我是用的ant design+vue做的项目，这里的语法也是ant design了

布局很简单，一个“+”号一个“-”号，再一个input框，内容如下：

其他的业务代码可以先不用管。嗯，这里的话，样式也不用我贴了吧，都是很简单的。

这样，一个组件就算写完了，

在其他页面里面需要import了然后在页面注册此组件

然后使用子组件的时候就可以直接写像普通标签一样写就可以了：

当然，光有静态页面肯定不行，还会涉及到业务逻辑，这个时候就开始变得复杂了（之前纠结就纠结在这里，什么子向父传值啦，父向子传值啦，父组件改变子组件的值啦之类的，就是一些值统一的问题）

所以我们还得继续 ^ _ ^

我们先看子组件（就是你封装的那个组件Duration，谁小谁是“子”哦 哈哈）

首先，这里是用于购物车的，有很多行，每一行都会有一个组件，那么，我当前点击的是哪一行呢？子组件得有操作的数据对象吧（就是当前行了），这个数据哪里来？当然是父组件告诉子组件啊！这个时候就会有父组件向子组件传值的问题了。
传值很简单，想想你使用自带组件要用变量的时候怎么写的？就是:变量名=“传的值”，我这里是这样写的

这里的record是表格每一行对应的值
子组件接收这个值后就可以使用啦！
子组件接收父组件传值：

前面是变量名，后面是变量对应的类型，接收完了之后，就可以直接使用它啦！

比如说我上面的onsub(tempduration)和onadd(tempduration)什么的，直接像正常变量一样使用！

接下来子组件把事件处理完，就该将处理结果返回给父组件继续操作啦！

子组件给父组件传值的方式也简单，只需喊一声（使用$emit传值）：

引号内的参数为父组件使用时的名字，相当于一个标记嘛，后面跟传过去的数据。

父组件要使用子组件传过来的数据的时候，就将名字拿到，自己再做处理。

接下来，就该轮到父组件接收子组件传过来的值了，风水轮流转哈哈哈

只需要将传过来的那个名字前面加个@符号，后面等于一个函数就好啦！

（温馨提示：我这里用了箭头函数，里面再执行需要执行的函数，具体我也不太清楚为什么，但是确实，我这个地方如果直接执行后面的函数的话，会报几个参数not defined的问题。有大神知道怎么处理的话，麻烦请告知，小白在此谢过了！）

然后你就在父组件中用函数给处理吧！基本就这样！

怎么样，是不是感觉很简单，但又觉得很复杂 。现在我细想下来还是觉得麻烦，毕竟，我是从一个已经做好了所有功能的组件上分离出来的，要封装组件，感觉有好多东西要重新写（虽然之前写好了，但是会有变化。）而且数据之间的影响，一分离开全部都需要再处理一遍。真心麻烦。

不过还好，如果哪里有错有问题，统一修改就好啦！各司其职有它的好处，只是分类的过程会比较麻烦而已。

另外补充一句，好像只有我这种小白，才会觉得组件不封装才方便吧！怪我都怪我，学习的vue知识除了知道用它的数据双向绑定之外，好像啥都不会了…丢脸！