Vue — 利用通信仿写一个form验证
最后更新于：2022-04-02 08:09:17
>[success] # 利用通信 仿写一个form 通信
~~~
1.自定义个组件之间传值就不能再使用'bus'和'vuex' 等系列，
因为'bus' 和 'vuex' 都是项目级别的传递，自定义组件无法使用
变依赖'vuex' 或者'bus',因此需要使用组件通信的其他几种特殊传递
2.第一种常见的父子传递'props' 父传子，'$emit' 控制父组件的某个方法，
让控制父组件的某个方法将从子组件传递过来的值重新赋值形成'子传父'。
3.第二种'vue' api文档中的'provide' / 'inject' ，'提供'/'注入'，
这种只能'父传子'，但不仅限'父传子'甚至'爷传孙'可以理解成
是一个加强版的'props'。
3.第三种'mixins' 混入继承，这种有点投机取巧适合接口，也就是提取出一个
公共的功能，在对应需要该接口的位置进行调用即可，这种不是传统意义父子
传值，更像是因为组件使用的数据来自一个接口，大家或者这个这接口数值
导致数据一致
4.利用自己的写的 'dispatch' 和 'broadcast' 进行传值，分别是'子孙像父组件'
'父组件像子孙传值'，利用的原理是'$on' 和 '$emit'
~~~
>[info] ## 分析前辈们form 组件 -- iview
~~~
1.根据下面代码可以分析实际这个form组件是由两个组件构成的，分别是'Form'
和'FormItem' 组件构成的
2.'Form' 中有两个值分别是'model'和'rules' 依次表示是'对应的字段'和'表单验证规则'
3.'FormItem' 中的'prop' 对应着'model' 中的某个字段，'FormItem'中有个插槽可以填充，
各个输入框
~~~
~~~
~~~
>[info] ## 开始定义自己form
~~~
1.根据上面分析，需要三个组件分别是'Form','Form-item','Input'
2.思路，定义验证规则传入给'Form','Form' 将规则分发给不同的'FormItem'
,每个'FormItem' 去进行验证
3.组件目录
│ ├── 'components' // 存放组件文件夹
│ │ └── 'Form' // 存放对iview 二次封装文件
│ │ └─ 'myFromItem.vue' // 每个单独输入框验证组件
│ │ └─ 'myFrom.vue' // 配置验证规则和字段
4.使用组件通信(三)中自定义封装的方法
~~~
>[danger] ##### 先自定义个一个input 输入框组件
~~~
1.常用v-model 绑定input，'v-model' 是一个语法糖，实际':value' 和'@input'
一个缩写，隐藏在写自己的input组件的时候需要拆开来定义
2.'input' 触发有两种一种是'input' 也就是输出就触发，'blur' 失去焦点触发，
因此组件触发要留出这两个触发事件，三还可以增加'change'事件
3.blur：失去焦点时触发，常见的有输入框失去焦点时触发校验；
change：实时输入时触发或选择时触发，常见的有输入框实时输入时触发校验、
下拉选择器选择项目时触发校验等。
~~~
~~~
~~~
>[danger] ##### myFromItem.vue 设计
* 编写组件第一步从样式布局 和 生命周期要做的下手
~~~
1.html 的设计需要有label 和一个插槽，其中插槽用来和各种类型的input组
合，'当字段必填的时候' 需要给字段加一个红星
2.根据前辈的分装可以发现'FormItem' 主要填了'prop' 和 'label'也就是依次对
应在form 传入的规则字段，和label 需要展示的名字
3.分析生命周期要做的事,首先要知道父子组件的生命周期调用的顺序：
vm.created -》vm.beforedMount-》child.created-》child.beforeMount
-》child.mounted-》vm.mounted
根据上面分析简单的首先子组件的生命周期是最先执行完毕的简单的说，
最外层的父组件最开始 会调用自己的created 和beforedMount等生命周期
然后对应最内层的子组件会调用自己的完整的周期，然后再执行父组的'mounted'
生命周期
4.首先我们需要将子组件内容传递给父组件，也就是要将'FormItem' 中的内容传递给
'Form' 组件中，父传子的几种方式中我们选着我们自定义的写的封装方法传递，
让其直接触发的方式也有几种'生命周期'，'计算属性'，'watch监听'，我们不需要吧所有
的'FormItem' 对象传递过去，也就是有'prop' 需要验证的传递给'Form' 组件 ，需要对
规则'Form' 中有'rules' 规则的字段加※号，关于触发'input' 传递过来的子传父调用
也应当在'mounted '声明周期，因为$on要想绑定监听就需要在生命周期中
4.1 总结上面 在'mounted' 生命周期要做的，将'FormItem' 对象子传父给'Form',
将'Form中的规则获取'并且如果是必填项将加上※，将获取input传递过来的触发事件
用$on 监听上，也就是'input' 和'blur' 事件中的方法
4.2 为了明确容易区分 分别定义了'getRules' 用来获取'Form' 父组件中的规则，和'setRules'
给'FormItem' 中必填项加※
5.当前生命周期结束后提供 给父组件一个效果 的方法
~~~
~~~
';