組件是 vue最強大的功能之一，在項目中我們經常會用到很多可複用的代碼塊，通過封裝可重用的代碼不僅提高了組件的可重用性，而且每個 Vue 組件都是Vue的實例，可接受相同的選項對象並提供相同的生命週期鉤子。這就讓項目調試起來更加簡單方便，整個開發效果也更高，可維護性也更強，也能適合多人協同開發來構建大型應用。同時組件也是資源獨立的，組件在系統內部可複用，組件和組件之間也可以嵌套。
定義Vue組件
Vue組件本質上是一個對象，該對象包含HTML標籤、props、data、created、computed、watch、mounted、methods、components 、css樣式等成員屬性。我們可以通過創建一個.vue文件來定義組件，組件命名的方式可以使用“kebab-case”方式，即單詞之間採用 - （短橫線）連接；或者使用“PascalCase”方式（駝峰式命名），即單詞之間首字母大寫。比如之前定義的網格組件auxiliary-grid.vue組件，這裡用到了HTML標籤、props、data、watch、mounted、methods、css樣式等成員屬性。
局部註冊組件
組件在vue實例內部進行局部註冊時，該組件只能在vue實例控制範圍內使用（即註冊到哪一個DOM元素下則在哪個DOM元素下生效）。局部註冊可以使用vue實例對象中的components屬性來實現，auxiliaryGrid這個變量名是用在模板中的自定義元素的名稱，我們可以使用該變量名在模板中調用對應的組件。
全局註冊組件
顧名思義就是將組件註冊在Vue根實例模板中，這樣在根組件下的任何子組件中都可以使用該組件（組件內部也是可以調用自己的）。當某個組件在項目中使用頻率很高且使用地方很廣時，就可以考慮將改組件註冊成全局組件。Vue註冊一個全局組件可以在main.js文件中使用 Vue.component(componentName, options)命令來實現，componentName為組件定義的名稱，options為需要註冊的組件對象。
自動化註冊全局組件
上面是一個最簡單的全局註冊例子，每註冊一個組件之前都需要先通過import來引入該組件，然後再使用用 Vue.component()命令來註冊組件。當註冊的全局組件較多的時候會讓main.js文件中內容變的很多很亂且不易維護，能不能定義一個函數來自動加載指定目錄下的vue組件實現自動化完成全局註冊。為了更好的管理項目我們通常在定義通用組件的時候會統一放在components目錄下，我們在components中創建一個index.js來掃描當前目錄下的vue組件並實現自動註冊。
require.context的使用可以參考文章： ，這裡定義的componentConfig.default || componentConfig是為了兼容import export和require model.export兩種導出規範。最後別忘了在main.js文件中引入我們剛剛定義的index.js文件。
總結：
以上內容是小編給大家分享的Vue實戰070：組件的局部註冊和全局註冊（含自動化註冊）功能的實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！
閱讀更多 編程手札 的文章
