vue-create-api个人理解核心作用：能让vue组件通过api方式调用的插件；这里主要是基于cube-ui和

介绍

本文用作个人学习记录

核心作用：能让vue组件通过api方式调用的插件；用法介绍：

源码理解

这里主要是基于cube-ui和vue-create-api源码进行create-api原理的解析

首先cube-ui中使用create-api的方式：

export default function createAPI (Vue, Component, events, single) {
  Vue.use(createAPIComponent, {componentPrefix: 'cube-'})
  const api = Vue.createAPI(Component, events, single)
  return api
}

然后会在cube-ui组件（modules文件夹下）中使用：

export default function addDialog (Vue, Dialog) {
  createAPI(Vue, Dialog, ['confirm', 'cancel', 'close', 'btn-click', 'link-click'], true)
}

接下来我们解释下上面代码的含义，在Vue.use中会执行vue-create-api中导出的install方法，代码如下：

function install(Vue, options = {}) {
  const {componentPrefix = '', apiPrefix = '$create-'} = options

  Vue.createAPI = function (Component, events, single) {
    if (isBoolean(events)) {
      single = events
      events = []
    }
    const api = apiCreator.call(this, Component, events, single)
    const createName = processComponentName(Component, {
      componentPrefix,
      apiPrefix,
    })
    Vue.prototype[createName] = Component.$create = api.create
    return api
  }
}

这里会在 Vue 构造器下添加一个 createAPI 方法。提供三个参数，Component 组件、 events 事件数组、 single 是否采用单例模式实例化组件。最后将api.create赋给Component.$create和Vue.prototype[createName]，这也是为什么调用组件有两种方式的原因。

function processComponentName(Component, options) {
  const {componentPrefix, apiPrefix} = options
  const name = Component.name
  assert(name, 'Component must have name while using create-api!')
  const prefixReg = new RegExp(`^${escapeReg(componentPrefix)}`, 'i')
  const pureName = name.replace(prefixReg, '')
  let camelizeName = `${camelize(`${apiPrefix}${pureName}`)}`
  return camelizeName
}