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.配置参数

Cube-UI组件中create-api 模块的基本使用的更多相关文章

  1. 在vue组件中访问vuex模块中的getters/action/state

    store的结构: city模块: 在各模块使用了命名空间的情况下,即 namespaced: true 时: 组件中访问模块里的state 传统方法: this.$store.state['模块名' ...

  2. HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  3. [android]__如何在studio中导入,使用开源的UI组件

    前言 在编程开发中,我们对第三方的优质开源组件是十分依赖的,在很多时候,我们都会使用到他们.使用第三方开源组件能够给我们的编程开发带来很大的便利.今天以这篇文章记录关于在android项目中引用第三方 ...

  4. vue+ElementUI+高德API地址模糊搜索(自定义UI组件)

    开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉 ...

  5. 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  6. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  7. 开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件

    背景 有这样一个需求,一位 React Suite(以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截止 ...

  8. vuex使用modules namespaced 后,模块名不同,函数名相同时候在组件中分发Action

    你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用 ...

  9. android kotlin 子线程中调用界面UI组件崩溃

    UI 只能在主线程内更新,子线程需要更新UI组件时可以这样: fun fuck(){ Executors.newSingleThreadExecutor().execute{ // url reque ...

随机推荐

  1. SAAS 何以“免费”实现盈利

    本文讲的是SAAS 何以"免费"实现盈利,[IT168 资讯]"天下没有免费的午餐",然而众多厂商却恰恰打出了免费这张王牌,且做出了不小的成绩,淘宝就凭借免费淘 ...

  2. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...

  3. 云时代 • 新契机:2017届中国SaaS产业大会圆满落幕

    2017年5-6日,由拓普会展携手中国云体系产业创新战略联盟主办,江苏省企业信息化协会,浙江省企业信息化促进会,广东省首席信息官协会,CIO时代学院,IDC点评网协办以及上海市网购商会,中国信息化推进 ...

  4. C# 对 TCP 客户端的状态封装

    TCP客户端连接TCP服务器端有几种应用状态: 与服务器的连接已建立 与服务器的连接已断开 与服务器的连接发生异常 应用程序可按需求合理处理这些逻辑,比如: 连接断开后自动重连 连接断开后选择备用地址 ...

  5. 单源最短路径:Dijkstra算法(堆优化)

    前言:趁着对Dijkstra还有点印象,赶快写一篇笔记. 注意:本文章面向已有Dijkstra算法基础的童鞋. 简介 单源最短路径,在我的理解里就是求从一个源点(起点)到其它点的最短路径的长度. 当然 ...

  6. CentOS7 安装boost

    (1)到这个网址www.boost.org下载相应的代码包,我下载的是目前最新的版本boost_1_59_0.tar.bz2 (2)进入目录执行解压操作:tar -jxvf boost_1_59_0. ...

  7. linux 服务器/客户端 tcp通信的简单例子

    昨天弄了sublime之后没有弄输入中文的了,学生党来着,刚好可以练练英语(英语渣渣,还要考六级),所以注释都写英文的(语法什么的就别太深究了) 服务器端: /*start from the very ...

  8. C/S程序设计范式

    在socket编程之并发回射服务器3篇文章中,提到了3种设计范式: 多进程 父进程阻塞于accept调用,然后为每个连接创建一个子进程. 多线程 主线程阻塞于accept调用,然后为每个连接创建一个子 ...

  9. Java λ表达式

    目录 Java Lambda表达式 1. 函数式编程思想 2. 体验Lambda的更优写法 3. Lambda表达式的标准格式 4. 练习:使用Lambda表达式(无参无返回) 5. 练习:使用Lam ...

  10. centos系统克隆

    首先保证虚拟机处于关机状态. 1.修改网卡信息 vi /etc/sysconfig/network-scripts/ifcfg-eth0 删除网卡信息HWADDR与UUID信息 修改IPADDR信息为 ...