深入element-ui源码实战

1,041 阅读1分钟

业务组件框架无法满足需求

  • 在实际工作当中,我们使用的业务组件以element-UI组件库为例
  • 在我们查阅完文档之后依然无法满足我们的需求

如何进行解决

举一个实际例子

el-form如何支持对自定义组件的校验

我们可以看到Products是我们自定义的一个组件而不是 el-select el-input等el组件

image.png

查看el组件相关源码

  • 我们可以在form里面的methdos找到这个校验方法validate
  • 在form.vue 找到validateField方法里面对props进行使用了validate进行校验

image.png

image.png

通过this.$refs.form.validateField实现我们的自定义组件校验

  • 在内部自定义组件值改变的时候进行emit通知外部组件
  • 传递出去的type对应我们的el-form-item 绑定的prop

image.png image.png

image.png

总结

实际工作中我们可以直接找到组件内部的方法和属性进行直接调用还是比较幸运的。
除了直接使用组件不对外暴露的方法和属性做操作

我们还可以这样

  • 1直接对内部源码属性进行修改-(大佬文章) juejin.cn/post/701805…
  • 2我们可以通过继承例如Vue的extends实现对组件的继承-自己手动实现对某些属性方法的扩展
  • 3直接问大佬