Cube-UI组件中create-api 模块的基本使用

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.配置参数
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章