12 实现组件2

[xwjie]

实现组件注册功能

关键点，使用 extends 继承 Xiao ， 在构造方法 constructor 里面调用 super(definition) 。

class Xiao{
   /**
   * 全局注册组件
   */
  static component(id: string, definition?: Object) {
    if (globalComponent[id]) {
      return globalComponent[id]
    }

    if (!definition) {
      return null
    }

    const newClass = class extends Xiao {
      constructor() {
        super(definition)
      }
    }

    for (let key in definition) {
      newClass[key] = definition[key]
    }

    globalComponent[id] = newClass
    log('globalComponent', globalComponent)

    return newClass
  }
}

给虚拟节点增加 insert hook

在 insert 钩子里面，调用 子组件的 $mount 函数，渲染dom。

function setComponentHook(vnode: any, vm: Xiao) {
  if (!vnode.sel) {
    return
  }

  // 查看是否组成了组件？
  const Comp = Xiao.component(vnode.sel)

  if (Comp) {
    log('组件', Comp)

    vnode.data.hook = {
      insert: (vnode) => {
        log('component vnode', vnode)

        let app =new Comp()
        app._parent = vm

        app.$mount(vnode.elm)
      }
    }
  }

  if (vnode.children) {
    vnode.children.forEach(function (e) {
      setComponentHook(e, vm)
    }, this)
  }

}