vue form validate 多个input_Vue 面向对象编程 - 综合运用 - 表单

之前的例子简单地说明了以下面向对象在 Vue 中的应用

很多人有不同意见，原因很简单，clipboard 返回的是单层对象，其实这种服务用原型也可以：

function 

单层对象不会对类型声明造成太多影响，原型模式也是设计模式的一种，因此这种写法应对这种问题我也是支持的

但是接下来要讲的问题，不用面向对象，复杂度是直线上升的，我搞出这个来只用了20分钟左右，大家可以试试不用面向对象，在ts环境下需要多少时间

---

大家都用惯了 element-ui 了是么?

element-ui 有个表单组件：

// 模板中

同样一个数据实体，在表单中绑定了太多次了

我们今天来看看新的 api 下，Vue 能够办到什么样的用法？

还是 script 优先的写法，原因见之前的文章

所有逻辑，交给组件，你别瞎忙活

你的组件内部，无逻辑

能否实现双向绑定和 model 导出呢？

可以的，怎么配合 面向对象 + SOA 实现呢？

---

这个问题比之前的 clipboard 要复杂，可能出现嵌套结构，之前的问题可以采用原型对象，这个问题不行，直接上极限面向对象

React 的话，推荐 useReducer，invoker 本身就是函数式模拟部分面向对象概念集成的东西，我反对的是全局统一命令模式跨平台，不反对 invoker state monad
但是 Vue 强烈反对用 vuex 或者相关技术 pania 之类，没有不变性约束，你用这个真的会炸

首先介绍给大家的是

抽象类

大家自行百度哈，网上相关解释太多了，编程界工程技术占100，面向对象独占 80

当然，抽象类现在收到了批判，很多人建议用 接口定义，抽象非具体，组合非继承，不过那都是后话，至少就这个问题的复杂度而言，我们先一步一步来

分析问题（想清楚是面向对象的第一要务，他只是翻译你心里的概念而已）

• 我们需要 FormItem， 也需要 Form
• FormItem 能自动绑定最近的 Form，但是如果有传入 Form 令牌，就绑定那个 Form 所在的令牌
• FormItem 可以通过自己的参数，修改 Form 的属性，比如 item 实例，model 等
• FormItem 需要自动为子组件加上绑定，这样可以让使用者负担最小化
• Form 需要对其下的 FormItem 有全权控制能力

可以，两个抽象类，Form：

/**

Form Item 抽象类：

/**

好了，接下来考虑各种问题实现真正的 FormService 和 FormItemService

最后 Form.vue 和 Formitem.vue

以上

https://codesandbox.io/s/magical-black-6duy6​codesandbox.io