封装一个From表单

组件封装是为了什么呢？？

               -----  复用性对吧！！

怎么来做封装呢？？？

                ----  考虑三点  state   props   solt 

前面我们说了做封装是为了复用，减少代码，效率更高，现在有一个后台管理系统，每个页面都是差不多的，中间的from 表单，每个页面都会用到，我总不能每个页面都写一大串吧，后期维护也不容易对吧 ，所有我们这个时候就萌发了能不能只写一个组件，每个页面只要调用一下，传入参数，控制它每个页面的显示，显示的具体内容。

好！！

1.0版本   

假设我们有三个 input 框  我想要控制三个框 一个是 文本输入框  一个是密码框 一个是数字框，input框上面有个type 属性，我给每个input框的type属性绑定一个变量 x y z  在需要调用的页面，传入参数 text  password  number ，是不是就可以实现啦~

type：x

type：y

type：z

那这样是不是可以实现，我想要这个框是什么类型，就可以实现啦~，但是我还想在这个input框上面使用不同的方法，去做修改，我还想要这个input框数量增加 于是有了2.0版本

2.0版本

那想要更好的使用这个封装，于是我们就先预估，假设我们最多需要4个input 框，最少2个input框，那我们一次性写上4个input框吧，把其中两个设置默认值，state ，为false，也就是不显示，那个页面需要，我就将状态改为true ，就可以实现增加减少的功能了，同时在绑定方法，我需要什么方法，我在通过父子通信，去写修改方法就可以了，于是完成了最基础的功能

false

false

但是突然啊，产品经理抽风啦，需要我们在这个上面增加一个按钮，或者一个头像

怎么办呢？？ 于是有了3.0版本

3.0版本

这个时候就需要考虑到插槽，我给它预先留一个插槽的位置，这个时候，如果需要加需求，那咱们就直接去当前页面，自定义事件就可以啦~~

solt 自定义插槽

solt 自定义插槽

好，以上都是很理想化的假设哈~  我们真正在开发中呢，肯定不是这么简单，通常这个数据都是动态渲染，你是不知道到底需要多个input框，是否有按钮，对吧，以及每个框到底实际意义是什么，于是究极版来啦~

究极版

后端存了一段option 的数组对象，需要你渲染到页面上，这个时候，这个时候你也不知道到底这个框是干嘛的，那么我们就可以在每个input框给到一个对象，在v-for 循环出来

也就是说直接由后端去控制传入的数据，渲染出来页面

我们封装组件最主要的就是props  还有初始值  以及插槽，然后props传递的数据的话，就是type ，所以说后端只要控制传入一个数组，每个input框对应一个对象，定义它的状态值，然后我们给它加一个v-for 循环，把这个数组循环出来，页面的展示就是根据你那个后端传给你的数据来控制了，这样的话，你就可以达到一个动态的渲染页面的效果啦~~