--- theme: channing-cyan highlight: atom-one-dark --- ## 前置内容对于Vue的双向绑定大家一定不陌生，入门基础的东西为啥要提？因为这是封装组件的基础！这里提出一个问题👇 不妨试试你的基础😏 > pageIndex.vue ```html ``` > dynamic-form.vue ```html ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cef0829d4d948c4b396b15b4bbafe96~tplv-k3u1fbpfcp-zoom-1.image) 上面的代码问题很明显，有两个问题： 1. 我们违背了vue的单项数据流，子组件不应该去变动父组件的值 2. 子组件v-model绑定的value在组件变动值之后，父组件并没有实现双向绑定的效果 > 这时候我们一般会有两种解决方案 ### 方案一 > pageIndex.vue ```diff - + ``` > dynamic-form.vue ```diff - + + export default { + computed: { + newValue: { + get({ value }) { + return value + }, + set(newVal) { + this.$emit('update:value', newVal) + } + } + }, + } ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84fc96bd059649b1b35405b514f16ef6~tplv-k3u1fbpfcp-zoom-1.image) 这种方案在我们并时基于开源组件库来封装业务组件的时候用的比较多的，这里解释下为啥这样就行了 > 我们通过计算属性`get`来使用父组件的值，`set`向上抛出新值的变动，让子组件不去直接变动父组件的值，父组件通过`.sync`父组件来修改子组件的值，子组件中的computed重新计算返回新值 .sync语法糖等同于这样 > pageIndex.vue ```html

``` 这种方式是等价的，`.sync`这种方式用的也是蛮多的，常出现在我们封装组件「组件嵌套」的情况，但是本质上和`v-model`这种是干的一样的事，原理也是一样的：比如, `v-model`可以自定义model的`prop/event` **v-model的方式** > pageIndex.vue ```html ``` > dynamic-form.vue ```html ``` **.sync的方式** > pageIndex.vue ```html ``` 不难看出来实现的原理都是一样的, 那在Vue2中为什么要去设计一个和`v-model`干同样事情的API出来呢?? **因为v-model不能在同个组件上使用多次！但是.sync这种语法可以啊，我只要在子组件中抛出不同的'update:xxx'就行了！** > 在Vue3中v-model传递`arguments`达到使用多次的目的，并且还可以自定义修饰符，所以所以在Vue3种这个语法被干掉了，Vue3相关内容你直接看文档吧😶 ### 方案二 > pageIndex.vue ```html ``` > dynamic-form.vue ```html ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d2994d138094304903cc4c52c2ebb62~tplv-k3u1fbpfcp-zoom-1.image) > 双向绑定原理：通过`v-bind="$attrs"`将父组件的值透传到`el-input`上实现值的绑定；`v-on="$listeners"`将`v-model`内部实现的`@input`事件透传到`el-input`上实现值响应。这种方式最为灵活，也是一般封装组件用的最多的一种方式，因为在我们日常工作v-model绑定在自定义组件的值一般不会是基础类型的值，我们绑定的最多的是对象，`v-model`绑定对象会出现什么问题？ ## 教你优雅的封装动态表单 ### 基本功能 > indexPage.vue ```html ``` > dynamic-form.vue ```html ``` > dynamic-form-item.vue ```html ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/980ed86af7394a63a98062ccd40382b9~tplv-k3u1fbpfcp-zoom-1.image) 可以Get到的技巧： - 通过`v-for`template减少创建不必要的dom节点，也可以通过这种方式实现`v-for/v-if`一起使用的效果 - 不需要响应式的数据通过`Object.freeze`冻结，Vue在初始化的时候就不会给这个属性加上`get/set`, 也算是性能优化的点 #### 支持深度属性在实际开发中，表单对象的属性还有可能是对象，拿常见的CRM/ERP系统来讲，一般像**[租赁合同，定金协议，项目设置]**等等，这些引用主数据的基本都是级联引用，这个时候表单组件就需要支持这种功能 > indexPage.vue ```html ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d358de9243904bc99ecf12defe0d65f9~tplv-k3u1fbpfcp-zoom-1.image) 支持深度属性需要用到两个方法 - `_getDeepAttr(model, deepPath)` - `_setDeepAttr(model, deepPath, val)` ##### _getDeepAttr实现 ```js let data = { obj: { v1: 'v1-val' } } _getDeepAttr(data, 'obj.v1') // => v1-val ``` ```js /** * @description: 深度获取属性 * @param {Object} model 表单对象 * @param {String} deepPath 深度属性 * @return {any} */ function _getDeepAttr(model, deepPath) { if (!deepPath) return if (deepPath.indexOf('.') !== -1) { const paths = deepPath.split('.') let current = model let result = null for (let i = 0, j = paths.length; i < j; i++) { const path = paths[i] if (!current) break if (i === j - 1) { result = current[path] break } current = current[path] } return result } else { return model[deepPath] } } ``` ##### _setDeepAttr实现 ```js let data = { obj: { dep1: { v1: 'v1', v2: 'v2' }, name: '北歌' } } _setDeepAttr(data, 'obj.dep1.v1', 'v1-newVal') // data.obj.dep1.v1 => v1-newVal // data.obj.dep1.v2 => v2 ``` ```js /** * @description: 设置深度属性 * @param {Object} model 表单对象 * @param {String} deepPath 深度属性 * @param {any} val 要设置的值 */ function _setDeepAttr(model, deepPath, val) { // 路径 let paths = deepPath.split('.') // 目标值，后面这个值会存放符合路径下的所有属性 let targetVal = {} // 陆续查找每个对象的prop let pathsNew = [...paths] let prop for (let i = paths.length - 1, j = i; i >= 0; i--) { prop = paths[i] // 最后一层要设定的值 if (i === j) { targetVal[prop] = val } else if (i === 0) { // 先获取根属性的值 const originalVal = model[prop] // 第一层需要直接替换的根属性 model[prop] = Object.assign(originalVal, targetVal) } else { // 更新每一个层级的值(去除存起来的值) let curDeppObj = _getDeepAttr(model, pathsNew.join('.')) // 将当前层级的值存储起来 targetVal[prop] = Object.assign({}, curDeppObj, targetVal) // 删除上个路径存储的值 delete targetVal[paths[i + 1]] } // 将处理过的路径去除 pathsNew.pop() } } ``` `_getDeepAttr`啥好讲的，这里主要讲下`_setDeepAttr`的实现思路 **实现思路** - 拆分路径：拿到每一层级下的属性名，因为后面需要一层一层往下找，拆分出来的层级数组做备份 - 倒序循环：我们最终的目的是给最后一层的属性赋值，需要`j`来确定当前循环是否是最后一层 - 循环体内的个判断条件 1. `i === j`：最后一层，也就是第一次循环，我们直接将**临时对象**设置为指定值 2. `i === 0`: 第一层，也就是最后一层循环，这个时我们直接读model[第一层属性]拿到根属性，值很显然是对象，接着将根属性直接替换成重新设置**临时对象** 3. 中间层级的处理：需要将获取到当前层级的属性对象, 将当前层级的对象和临时对象进行合并，只影响目标属性，同层级的其他属性不能丢失，最后将上个层级的属性去除 **调试图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/990947cb9bab4d26983c6a38dbdeb388~tplv-k3u1fbpfcp-zoom-1.image) 强烈建议跟着调试一遍，一学就废~😃 > dynamic-form.vue ```diff ``` > dynamic-form-item.vue ```html ``` 表单项组件只是多加了两个对表单项类型的支持，并没有其他逻辑，`dynamic-select`组件是封装的支持`select/treeSelect`通过url动态获取options的扩展组件，感兴趣的可以看[专栏里的这篇文章](https://juejin.cn/column/6969232929666891806) ### 自定义内容(slots) 前置知识👉 [精讲插槽](https://juejin.cn/post/6970279201790230541#heading-0) 对于el-form进行包装之后封装的组件也需要支持`form-item`插槽，就这三个： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adbffecdc18b4a199d66a2852154b3e3~tplv-k3u1fbpfcp-zoom-1.image) 工作中我们自定义最多的就是表单项。比如这种：使用业务封装的组件作为表单项 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f32dfd8c28a44d88803b49212194e11~tplv-k3u1fbpfcp-zoom-1.image) > 不管是什么样的组件，总之这个表单项内容必须得可自定义，这个时候就得用到插槽了 - 支持两种渲染方式 1. template模板的方式 2. 在配置项中写render函数的方式 > 优先级：我们遵循和vue一样的规则，render函数的方式是高于template模板的 ```js { label: '自定义', type: 'slot', prop: 'custom' } ``` #### template写插槽的方式 ```html ``` #### 配置项写render函数的方式 ```js { label: '自定义', type: 'slot', prop: 'custom', render: ({ value, $createElement: h }) => { return h('el-button', value) } } ``` > dynamic-form.vue `dynamic-form`这个组件改动不大，就加了这一项将当前实例往下注入 ```js export default { provide() { return { formThis: this } }, } ``` > dynamic-form-item.vue ```html ``` 可以Get到的技巧： - 这种方式读起来比写老长的`||`读起来更清晰一点 ```js [ typeof xxx, typeof xxxx, ].includes('function') ``` - $scopeSlots作用域插槽中的方法是用来返回VNode, 我们可以传递参数来给插槽传递数据 **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79dc60fdbcc84b8591d5c4830976f524~tplv-k3u1fbpfcp-zoom-1.image) #### label/error内置插槽的支持在实现这两个插槽之前需要改下`el-form-item`，让用户使用深度属性配置插槽的时候好写一点。 ```js 比如用户设置了 { prop: 'depositAgreement.depositAmount', ... } ``` 这个时候用户想要在使用`dynamic-form`个组件自定义表单项内容的时候需要怎么去用 ```html ``` > 在使用template去写组件的时候，我们写的所有东西都要经过compile，如果模板上有特殊字符肯定也需要做更多的额外出理，所以在享受template模板语法带来的快捷同时也丢失了一些灵活度。 > dynamic-form-item.vue ```html ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b0b411e85bd412dade6f189e6dc9163~tplv-k3u1fbpfcp-zoom-1.image) ### 表单校验 #### 自动校验的支持如果是非深度属性的值校验其实只要在`e-form`上加`model`属性，在`el-form-item`上加`prop/rules`就已经实现了，但如果是深度属性，这个时候就需要做一些额外的处理。 ```js { label: '金额', type: 'text', prop: 'depositAgreement.depositAmount', rules: [ { required: true, message: '金额不能为空', trigger: 'blur' }, { validator: (rule, val, callback) => { if (val < 100) { return callback(new Error('金额不能小于100')) } return callback() }, trigger: ['change', 'blur'] } ] }, ``` > dynamic-form.vue ```js { computed: { // 需要校验的item validateItem({ formItemList }) { return formItemList.filter(i => i.rules) }, // 传递的form的数据源，用于处理深度属性校验问题 model({ validateItem, value, isDeepPath, _getDeepAttr }) { const _model = { ...value } if (!validateItem.length) return _model; validateItem.forEach(({ prop }) => { if (isDeepPath(prop)) { _model[prop] = _getDeepAttr(_model, prop, _getDeepAttr) } }) return _model } }, } ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39aead241b0d4e969d61770cf3b45da7~tplv-k3u1fbpfcp-zoom-1.image) > 我们计算出来的model只给`el-form`的model属性用，且只有当用户设置了深度属性且设置了校验model才会计算出来用于校验的属性 #### 手动校验的的支持只要给el-form设置ref属性就可以了，为了方便用户自定义，ref就不直接写死 ```js { props: { // 自定义elForm的ref属性 elFormRef: { type: String, default: 'elForm' } }， methods: { /** * @description: 表单整体校验 */ validate(callback) { return this.$refs[this.elFormRef].validate(callback) }, /** * @description: 单个字段校验 */ validateField(props, callback) { return this.$refs[this.elFormRef].validateField(props, callback) }, /** * @description: 清除校验 */ clearValidate(props) { return this.$refs[this.elFormRef].clearValidate(props) }, /** * @description: 表单重置，清除校验 */ resetFields() { return this.$refs[this.elFormRef].resetFields() }, } } ``` > 上面这些其实可以不写，为了方便用户操作，不写老长的`$refs`一层的引用，让用户自己通过reference的方式去操作 ### v-on="$linsters"的坑，千万小心！接下来就是最后一环，我们需要对向外界支持所有表单项的自定义事件，这不挺容易的嘛，`v-on="$listeners"`透传事件下去不就完事？ **使用** ```html ``` > dynamic-form.vue ```diff ``` > 仔细看看这段代码，真的没有问题嘛？？？我们`v-on="$listeners"`是不是一个不小心把v-model的内置input事件也透传下去了？会有问题嘛？ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62addbd8411c41e8bf71b7f29335a02a~tplv-k3u1fbpfcp-zoom-1.image) 故事的开始是这样的： el-input和dynamic-form-item交互的过程： 1. 我们改变输入框值 2. el-input抛出input事件并携带当前表单项的值Sting类型的基本值) 3. dynamic-form-item组件在使用el-input写了v-on="$listeners"将所有用在dynamic-form-item上事件全都透传到el-input上 4. 我们在使用dynamic-form-item也确实自己写了input事件的处理程序 > 到这我们实现了 dynamic-item和el-input的双向绑定 dynamic-form-item和dynamic-form的交互 1. dynamic-form中我们通过监听@input，监听当前变动的哪个表单项，将表单对象的值重新更新抛出input事件 2. 用户通过v-model内部实现的input监听事件及事件处理方法帮我们实现了双向绑定 > 故事到这就非常的圆满。可是我外部又自己写了一个@input事件，并且这个事件还透传到el-input上了! 那表单项变动我就得监听, v-model内部实现的input事件处理不得重新赋值？结果内部就给v-model="formModel"中的formModel重新赋值了，从一个对象变成了基本值(el-input抛出的值)。 > 故事到这也就结束了。页面报错了所以dynamic-form是有两个Input事件算是程序的，怎么去看？在dynamic-form打印下this，来看看 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc48102c3b804d02aeaa583219dbf1a6~tplv-k3u1fbpfcp-zoom-1.image) > dynamic-form.vue 稍微改造下 ```js export default { // 解决$listeners透传事件导致双绑问题 model: { // 自定义v-model的监听事件名 event: 'dyInput' }, } ``` 抛事件的话我们这样去抛就行 ```js this.$emit('dyInput', {...value}) ``` **效果图💗** ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71984c716a374206bb5ec789469b977a~tplv-k3u1fbpfcp-zoom-1.image) 到这功能算是完成了，但是外界监听`input`事件没法具体到哪个表单项，这事件就基本没用！我们需要给外界加个标识告诉他是那个表单项抛出的事件。还有一个问题，表单项随着项目增多肯定类型也越来越多, 事件类型也就越来越多，很多表单项抛出的事件名都是一样的，外界并不太好去管控这些事件，而且所有事件都写在这个组件上，想要区分事件到底是哪个组件抛出来的还得去input事件里面输出一下嘛？这不太好。。。 `示例代码` ```html ``` 我们希望`dynamic-form`上只有`input/change`事件，其他事件全都写在各自配置项里面 ```js { label: '协议类型', type: 'select', // ...省略options,props配置 prop: 'depositAgreement.businessType', listeners: { 'visible-change': (isShow) => { console.log(isShow, 'select'); } } }, ``` > dynamic-form.vue ```html ``` > dynamic-form-item.vue ```html ``` ## 扩展：v-model源码浅析 > transform component v-model data into props & events `src\core\vdom\create-component.js` ```js // transform component v-model data into props & events // v-model特殊处理 if (isDef(data.model)) { transformModel(Ctor.options, data) } ``` **transformModel** ```js // transform component v-model info (value and callback) into // prop and event handler respectively. function transformModel (options, data: any) { /* model: { prop: 'xx', event: 'xxx, } */ const prop = (options.model && options.model.prop) || 'value' const event = (options.model && options.model.event) || 'input' // 给attrs的指定model的prop赋值 ;(data.attrs || (data.attrs = {}))[prop] = data.model.value const on = data.on || (data.on = {}) const existing = on[event] const callback = data.model.callback if (isDef(existing)) { if ( Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback ) { on[event] = [callback].concat(existing) } } else { // 给事件里面添加v-model解析出来的内置事件 on[event] = callback } } ``` 至此这篇文章就分享结束了，表单组件的大部分都实现了，还有表单布局没有去实现，其实就是需要用`el-row/el-col`包下表单项，并没有特别的逻辑就不贴代码了，感兴趣的可以[点我查看代码](https://github.com/it-beige/blog/tree/master/%E5%B0%81%E8%A3%85%E7%BB%84%E4%BB%B6%E7%9A%84%E6%8A%80%E5%B7%A7%E5%92%8C%E5%9D%91) ## 写在最后如果文章中有那块写的不太好或有问题欢迎大家指出，我也会在后面的文章不停修改。也希望自己进步的同时能跟你们一起成长。喜欢我文章的朋友们也可以关注一下我会很感激第一批关注我的人。**此时，年轻的我和你，轻装上阵；而后，富裕的你和我，满载而归。** ### 业精于勤，荒于嬉 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/faa2376c38364133a609147d56ec7b48~tplv-k3u1fbpfcp-zoom-1.image) ## 系列文章 [手把手教你玩转render函数「组件封装-dynamic-select」](https://juejin.cn/post/6969226302767235108) [手把手教你玩转render函数「组件封装-dynamic-input」](https://juejin.cn/post/6969226302767235108) [手把手教你玩转render函数「组件封装-dynamic-checkbox」](https://juejin.cn/post/6969597821280321550) [手把手教你玩转render函数「组件封装-dynamic-cascader」](https://juejin.cn/post/6970279201790230541) ## 往期文章 [【建议追更】以模块化的思想来搭建中后台项目](https://juejin.cn/post/6894412199700201485) [【以模块化的思想开发中后台项目】第一章](https://juejin.cn/post/6913092522814210061) [【前端体系】从一道面试题谈谈对EventLoop的理解](https://juejin.cn/post/6868849475008331783) (更新了四道进阶题的解析) [【前端体系】从地基开始打造一座万丈高楼](https://juejin.cn/post/6867784542338416648) [【前端体系】正则在开发中的应用场景可不只是规则校验](https://juejin.cn/post/6867784542338416648) [「函数式编程的实用场景 | 掘金技术征文-双节特别篇」](https://juejin.cn/post/6878941871259779085) [【建议收藏】css晦涩难懂的点都在这啦](https://juejin.cn/post/6888102016007176200)