vue 實現(xiàn)基礎組件的自動化全局注冊
更新時間：2020年12月25日 10:22:33 作者：紫藤蘿yu
這篇文章主要介紹了vue 實現(xiàn)基礎組件的自動化全局注冊的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
參考官網：https://cn.vuejs.org/v2/guide/components-registration.html
在日常開發(fā)中，有一些組件是比較常用，但是為了避免在開發(fā)過程中不停地引入，或者在main.js中注冊，，或者每添加一個組件就需要手動注冊一次。則直接進行自動化全局注冊。
自動化全局注冊，官網上都詳細的說明，以下是自己官網的說明基礎上進行了一個demo開發(fā)實例：
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` 導出的，
// 那么就會優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根。
componentConfig.default
)
})
以上代碼需要解釋的地方：
1、匹配基礎組件文件名的正則表達式，此處需要根據實際的組件名稱和規(guī)則進行配置；
2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法。可以用不同的寫法來表示組件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時候頁面的name。若頁面沒有定義name，則報錯。
3、在main.js中引入index.js文件
由于全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生。
// 基礎組件的自動化全局注冊。全局注冊的行為必須在根 Vue 實例 (通過 new Vue) 創(chuàng)建之前發(fā)生 import './components/base/index'
4、直接在需要的地方使用該組件即可
頁面效果如下示：
以上就是vue 實現(xiàn)基礎組件的自動化全局注冊的詳細內容，更多關于vue 組件全局注冊的資料請關注腳本之家其它相關文章！
相關文章
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實戰(zhàn)應用，系統(tǒng)的學習Vue生態(tài)體系，希望和大家共同成長，我們一起探討下Vue3和Vue2的響應式原理，那究竟什么是“響應式”，接下來跟著小編一起來學習吧2023-05-05
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個使用?Vue.js?開發(fā)所有前端應用的框架,這篇文章主要給大家介紹了關于uniapp使用uview的簡單案例,需要的朋友可以參考下2023-03-03
前端的數據均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中優(yōu)雅實現(xiàn)數字遞增特效的詳細過程
項目中需要做數字滾動增加的效果,一開始很懵,研究了一下原理,發(fā)現(xiàn)很簡單,下面這篇文章主要給大家介紹了關于vue中優(yōu)雅實現(xiàn)數字遞增特效的詳細過程,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue2.0 自定義組件的方法（vue組件的封裝）,本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解vuex中mutations方法的使用與實現(xiàn)
這篇文章主要為大家詳細介紹了vuex中mutations方法的使用與實現(xiàn)的相關知識,文中的示例代碼簡潔易懂,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
這篇文章主要介紹了vue項目如何配置public靜態(tài)資源路徑訪問方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11