vue2.x+element 技术栈是前端切图仔一把利器，很多优秀的组件设计思想也很有深入研究的价值。

组件通信基础

在进入源码之前我们先从 组件通信 开始聊起，如果忽略vuex，我们还有哪些方式进行组件通信？

  • $parent $children 显式地耦合组件，注意 $children 顺序不严格随代码
  • $root
  • $refs 一般DOM名称
  • provide/inject 之前冷门现在越来越火的注入方式
  • $attrs $listeners 显式地获取未接收的 prop等值，记得 inhrefxxx:false
  • $on $emit

一般情况下，可以考虑书写一个 eventBus ，最简单的方式莫过于直接通过 new Vue 来实现

此外，slot也可以算组件通信。尤其是用于table时候，用户来决定传入的结构，自由度更高。

Element 高频组件浅析

  1. form form-item input
  2. 弹窗
  3. 树状递归组件

这里等实现vue UI框架时候再补充吧。

关键词

form model rules，减少结构耦合, project 通过传递this来实现响应式，使用 async-validator 实现验证

为了减少结构耦合，一般不适用 parent 来获取父类的定义，封装了 src/mixin/emitter 来实现了广播，通过递归获取到想要的父类或祖先 broadcost dispatch

弹窗组件这里，可以通过 const vm = new Vue({}).mount() 空挂载DOM，获取到生成的真实DOM，后续手动挂载到 document.body.append(vm)

后续的 axe-ui