vue 實現基礎組件的自動化全局注冊

參考官網：https://cn.vuejs.org/v2/guide/components-registration.html

在日常開發中，有一些組件是比較常用，但是為了避免在開發過程中不停地引入，或者在main.js中注冊，，或者每添加一個組件就需要手動注冊一次。則直接進行自動化全局注冊。

自動化全局注冊，官網上都詳細的說明，以下是自己官網的說明基礎上進行了一個demo開發實例：

1、自定義文件夾：

在src下新建一個components文件夾，用于存放組件。并新建一個用于存放需要自動化全局注冊的組件，例如base。

2、在base文件夾下定義index.js，具體代碼如下示：

// 基礎組件的自動化全局注冊import Vue from ’vue’const requireComponent = require.context( // 其組件目錄的相對路徑 ’./’, // 是否查詢其子目錄 true, // 匹配基礎組件文件名的正則表達式 /.vue$/ ) requireComponent.keys().forEach(fileName => { // 獲取組件配置 const componentConfig = requireComponent(fileName) // 全局注冊組件 Vue.component(componentConfig.default.name, // 此處的name,是組件屬性定義的name// 如果這個組件選項是通過 `export default` 導出的，// 那么就會優先使用 `.default`，// 否則回退到使用模塊的根。componentConfig.default ) })

以上代碼需要解釋的地方：

1、匹配基礎組件文件名的正則表達式，此處需要根據實際的組件名稱和規則進行配置；

2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法?？梢杂貌煌膶懛▉肀硎窘M件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時候頁面的name。若頁面沒有定義name，則報錯。

3、在main.js中引入index.js文件

由于全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生。

// 基礎組件的自動化全局注冊。全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生import ’./components/base/index’

4、直接在需要的地方使用該組件即可

頁面效果如下示：

以上就是vue 實現基礎組件的自動化全局注冊的詳細內容，更多關于vue 組件全局注冊的資料請關注好吧啦網其它相關文章！