石家庄房产网站官网,店铺推广怎么做,佛山市住房与城乡建设局网站,哪些网站做视频能赚钱相信大家一定用过elementui这个组件库#xff0c;那么对里面的表单组件一定不陌生。
最常用的几个组件就是el-form#xff0c;el-form-item#xff0c;el-input#xff0c;表单校验时的错误提示功能是交给el-form-item来实现的。当el-input填写时触发校验规则#xff0c;…相信大家一定用过elementui这个组件库那么对里面的表单组件一定不陌生。
最常用的几个组件就是el-formel-form-itemel-input表单校验时的错误提示功能是交给el-form-item来实现的。当el-input填写时触发校验规则验证失败后通知el-form-item进行错误信息提示。
他们大多时候是处于爷——父——子的关系但是这个关系并不是完全固定的。我自己在使用的时候经常也不仅仅只使用这三个组件简单举个例子
el-formel-form-itemMyDivel-input/el-input/MyDiv/el-form-item
/el-form上面代码里面MyDiv可能只是一个简单的布局组件没有什么实际作用但是一旦加了之后el-input和el-form-item就脱离了父子关系那么通讯方式也就会发生变化。如果之前el-input校验规则失败后使用的是this.$parent的方式去触发校验提示的话当我们在他们之间添加其他组件后就会失效。并且这是不可控的你无法预料他们可能被如何实现甚至之间间隔了多少个组件若是强硬的将两个组件封装在一起又会显得臃肿冗余不符合组件封装的规范所以这个时候就可以使用派发来实现。
dispatch 派发
我们直接看elementui源码时如何使用派发的方式解决我们上面提到的问题
dispatch(componentName, eventName, params) {var parent this.$parent || this.$root;var name parent.$options.componentName;while (parent (!name || name ! componentName)) {parent parent.$parent;if (parent) {name parent.$options.componentName;}}if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}}可以看出elementui其实就是遍历了父级组件一直遍历拿到想要的组件为止。找到需要的组件后直接$emit派发事件那么肯定在他们父级组件内部一定会有$on进行着事件监听。需要注意的是componentName这个属性是elementui自己在组件添加的我们使用的时候直接使用name即可name就是我们定义组件时自己定义的name
broadcast 广播
broadcast(componentName, eventName, params) {this.$children.forEach(child {var name child.$options.componentName;if (name componentName) {child.$emit.apply(child, [eventName].concat(params));} else {broadcast.apply(child, [componentName, eventName].concat([params]));}});
}broadcast与dispatch 实现逻辑没什么区别只是一个向上遍历进行派发一个向下遍历进行广播。
