前端实习手记（6）：6不起来

已经实习六周咯，其实前面都是在做一些官网样式修改之类的，然后这周官网也没有太多需求要修改了，就开始做新的东西了！！！本周也就做了个小小的需求吧，但也是磕磕巴巴的（被自己蠢哭）......不太，开心的一周，后面熟悉了就感觉好多了

总结

• 封装组件：自定义模特表单对话框 Ant Design Vue
• es6学习：ES6 教程

新增：自定义模特表单对话框

功能概述

• 点击主页面的新增按钮，弹出一个表单的对话框，可以自定义模特的名称，头像，选择性别年龄地域，勾选同意协议，有取消和生成按钮。

思路

• 搭建框架：先单独写一个组件来搭建表单基本结构
• 表单细节：再来写表单的校验规则
• 逻辑编写：之后点击生成能够收集到填写的信息

一、表单搭建（框架）

先来搭建一个基本的表单框架，这里是使用了Ant Design Vue的Modal和Form等组件，无脑复制需要使用的就好了。需要注意的几个点：

• 需要填写和收集信息的每一项要使用formitem包括
• Modal的底部可以使用footer插槽插入自定义内容
• 上传与下拉框组件是项目中别人写的拿过来用了（别人咋用你咋用直接cv大师）

二、校验规则（细节）

先看看antd官网怎么用的校验规则，一个简单的例子：

• 通过 rules 属性传入验证规则
• 将formitem的prop属性（现在改为了name）设置为需校验的字段名（注意收集的字段和校验的字段保持一致）
• 在提交表单前再进行一次表单校验

那么仿照这个例子，改进一下我们的表单：

三、收集信息（逻辑）

最后一步当然是要收集到我们填写的信息，然后向后端发送请求了。

• 点击提交按钮，将所收集的信息赋给后端所需要的参数
• 携带path和params发送post请求
• 但是这里是把生成和取消事件使用emits把submitAdd和cancleAdd发射给父组件去处理了

四、组件的使用

写好了对话框组件，怎么让父组件使用呢？

• 在父组件中点击上传时，让组件可见就OK了

• 我们通过emits定义了自定义事件cancleAdd和submitAdd，只需要在触发这个事件执行相应的方法就好了

emits的使用？

• emits 是用来定义一个组件可以触发哪些事件及其携带的参数。
• 1.定义emits: 在子组件的选项中定义 emits 选项来声明组件可以触发的事件名称。

• 2. 触发事件: 使用 $emit 方法来触发这些事件，并传递相应的参数。

• 3. 监听事件: 在父组件中使用@来监听子组件触发的事件，并执行相应的处理函数。

写在最后

• 好好又是拖延的一周！第七周才写第六周的周报哈哈哈
• 感觉时间过得好快啊，，这周好像也没做什么东西就飞的过去咯
• 八月的第一周，又是宅的一周了~