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

Cube-UI组件中create-api 模块的基本使用的更多相关文章
- 在vue组件中访问vuex模块中的getters/action/state
store的结构: city模块: 在各模块使用了命名空间的情况下,即 namespaced: true 时: 组件中访问模块里的state 传统方法: this.$store.state['模块名' ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- [android]__如何在studio中导入,使用开源的UI组件
前言 在编程开发中,我们对第三方的优质开源组件是十分依赖的,在很多时候,我们都会使用到他们.使用第三方开源组件能够给我们的编程开发带来很大的便利.今天以这篇文章记录关于在android项目中引用第三方 ...
- vue+ElementUI+高德API地址模糊搜索(自定义UI组件)
开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉 ...
- 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入
在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- 开源 UI 库中,唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景 有这样一个需求,一位 React Suite(以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截止 ...
- vuex使用modules namespaced 后,模块名不同,函数名相同时候在组件中分发Action
你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用 ...
- android kotlin 子线程中调用界面UI组件崩溃
UI 只能在主线程内更新,子线程需要更新UI组件时可以这样: fun fuck(){ Executors.newSingleThreadExecutor().execute{ // url reque ...
随机推荐
- Golang项目部署
文章来源:https://goframe.org/deploymen... 一.独立部署 使用GF开发的应用程序可以独立地部署到服务器上,设置为后台守护进程运行即可.这种模式常用在简单的API服务项目 ...
- struts2验证码
验证码大多是jsp,servlet写的. 我拿来主义了, 再自己完善了一下(我一直努力想要站在巨人的肩膀) 首先是页面 test.jsp <%@ page contentType=" ...
- JVM调优方法笔记
1.性能工具介绍 jvisualvm jmap jstat jstack/threaddump jprofiler jmeter 2.性能调优4步骤 重现问题 定位问题 模拟问题 解决问题 http: ...
- 编程语言50年来的变化,我用50种编程语言告诉你“Hello world”怎么写!
当我们学习一门新的语言时,"Hello, World!"通常是我们所写的第一个程序. 因此,所有程序员在职业生涯中至少完成了"Hello, World!"程序员 ...
- Appium-desktop 元素定位
1.打开 appium-desktop ,点击 start session 2.打开后,点击屏幕右上角的搜索按钮 3.然后会打开配置页面,在本地服务配置信息同上面写的代码链接配置.填入正确的信息后,点 ...
- 题目分享V
题意:现在两个人做游戏,每个人刚开始都是数字1,谁赢了就能乘以k^2,输的乘以k(k可以是任意整数,每次不一定相同)现在给你最终这两个人的得分,让你判断是否有这个可能,有可能的话Yes,否则No. 分 ...
- webpack----js的静态模块打包器
webpack----js的静态模块打包器 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 webpack 是一个现代 J ...
- 深入理解JS中的对象(一)
目录 一切皆是对象吗? 对象 原型与原型链 构造函数 参考 1.一切皆是对象吗? 首先,"在 JavaScript 中,一切皆是对象"这种表述是不完全正确的. JavaScript ...
- 【Spark】SparkStreaming从不同基本数据源读取数据
文章目录 基本数据源 文件数据源 注意事项 步骤 一.创建maven工程并导包 二.在HDFS创建目录,并上传要做测试的数据 三.开发SparkStreaming代码 四.运行代码后,往HDFS文件夹 ...
- 【Kafka】数据分区策略
数据分区策略 四种策略 一.指定分区号,数据会直接发送到所指定的分区 二.没有指定分区号,指定了数据的key,可以通过key获取hashCode决定数据发送到哪个分区 三.都没有指定的话,会采取rou ...