前言 : 組件系統是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復用的小組件來構建大型應用,任意類型的應用界面都可以抽象為一個組件樹。 現在基於vue的UI組件庫有很多,比如iview,element-ui等。但有時候這些組件庫滿足不了我們的開發需求,這時候我們就需要自己寫 ...
前言 :
組件系統是Vue.js其中一個重要的概念,它提供了一種抽象,讓我們可以使用獨立可復用的小組件來構建大型應用,任意類型的應用界面都可以抽象為一個組件樹。
現在基於vue的UI組件庫有很多,比如iview,element-ui等。但有時候這些組件庫滿足不了我們的開發需求,這時候我們就需要自己寫一個插件。
正文:
今天做一個類似於element-Container的(自由度高,可大量復用)全局組件,直接上步驟:
1.在src目錄下新建components文件夾,結構如下:
2. `mh-box/index.vue ` 文件中寫組件結構,把該挖的坑挖好(這裡我們定義了`標題` / `圖標按鈕` / `if條件式` ),位置使用slot
3.樣式(僅供參考)
4.在外層index.js中對我們的組件進行處理(四步)
(1).導入; (2).存到數組中; 3.定義install方法; (4).導出
5.在main.js中導入並使用
現在自定義組件 `<mh-box>` 就可以全局使用了,看下效果