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