1.这个模块的功能是什么?
官方文档是这样解释的:
该模块默认暴露出一个 createAPI 函数,可以实现以 API 的形式调用自定义组件。并且既可以在 Vue 实例上下文中调用,也可以在普通 js 文件中调用。
注: 所有通过 createAPI 实现的通过 API 的形式调用的自定义组件(cube-ui 内置的组件)都需要通过 Vue.use 注册才可以。
个人理解:就是通过这个这个模块将特定的组件注册为全局API模式调用,简化了组件的导入和注册,并且防止产生难以预料(?)的BUG.
2.用法
详细用法可参考官方文档,以下代码功能简单,但便于理解基本用法:
- 1.创建单独的注册 register.js 文件
// 导入 createAPI 模块
import { createAPI } from 'cube-ui'
// 导入Vue
import Vue from 'vue'
// 导入需要注册的组件
import HeaderDetail from 'components/header-detail/header-detail'
// 将 HeaderDetail 组件注册为全局API模式调用
createAPI(Vue, HeaderDetail)
- 2.在 main.js 中引入注册模块
// 导入API注册模块
import './register'
- 3.在需要使用此API注册组件的组件中通过 $create组件名 调用
// 点击头部的时候通过调用API组件的方式显示头部详情
// $create+HeaderDetail
this.headerDetailComp = this.headerDetailComp || this.$createHeaderDetail({
// 配置参数$props
// 是父组件向子组件传递数据,类似于直接在组件中绑定属性传值
$props: {
seller: 'seller'
}
})
// 还可以调用API组件中的show()方法
this.headerDetailComp.show()
- 4.配置参数