Vue 中的組件就像小部件。我們可以按照我們想要的方式編寫可重用的自定義元素。組件不過是由根或 Vue 實例包含的所有選項組成的對象。

一般來說，注冊一個組件有兩種方式

(1) 全球
(2) 本地

全局注冊并非在所有情況下都是理想的，但是如果您想在多個組件中共享相同的子組件怎么辦？一起來學(xué)習(xí)如何在VueJS中全局注冊通用組件吧！

先決條件

在繼續(xù)前進(jìn)之前，我們希望您知道-

1. Vue.js基礎(chǔ)知識
2. Vue CLI搭建

教程目標(biāo)

那么在今天的關(guān)于在 VueJS 中全局注冊通用組件的最佳方法的教程中，我們將介紹哪些內(nèi)容？

• 在本地注冊組件

• 全局注冊組件

• 注冊通用組件的最佳方式

初始設(shè)置

假設(shè)我們已經(jīng)使用vue cli創(chuàng)建了一個項目。

為了理解這一點，讓我們以我們將在整個應(yīng)用程序中使用的最常創(chuàng)建的組件為例。我們有BaseInput、BaseButton、BaseCard、BaseCheckbox、BaseForm、BaseSelect等通用的基礎(chǔ)組件，具有基本的功能。

本地注冊

為了使用這些基礎(chǔ)組件，我們必須在每個父組件的腳本部分導(dǎo)入和注冊組件，如下所示：

這樣，我們就成功地在本地注冊了每個組件。

我們可能需要重復(fù)使用這些組件。為了避免這種重復(fù)，我們可以全局注冊這些基本/通用組件，以便我們可以在應(yīng)用程序的多個組件中使用它們。

全球注冊

導(dǎo)航到文件源代碼/main.js. 導(dǎo)入組件并注冊它們，如下所示。

這里有什么問題？

當(dāng)我們的應(yīng)用程序開始增長并擁有大量通用組件時會發(fā)生什么？是否需要一一注冊并使用？是的，這是可以做到的，但這是一種低效且過時的做法！并且每當(dāng)我們創(chuàng)建一個新的公共組件時，我們必須在新組件和 src/main.js 文件之間來回注冊和使用它們。

什么是更好的方法？

好吧，我們可以用幾行代碼注冊每個基本組件。例如，BaseButton.vue、BaseInput.vue、BaseCard.vue，以及通常具有 Base*.vue 模式的每個組件（在本例中）。讓我們看看它的實現(xiàn)。

使用全局注冊并使用 app.component() 方法創(chuàng)建全局組件容器：使組件在當(dāng)前 Vue 應(yīng)用程序中全局可用。雇用 Vue 開發(fā)人員來完成工作

在 VueJS 中全局注冊通用組件的最佳方式

使用以下命令安裝 Lodash 庫。

npm 安裝 lodash --save

導(dǎo)航源代碼/main.js并將以下代碼添加到文件中。

導(dǎo)入 Lodash 的 upperFirst 和 camelCase 函數(shù)

從“vue”導(dǎo)入 Vue；從“./App.vue”導(dǎo)入應(yīng)用程序；從“./router”導(dǎo)入路由器；從“./store”導(dǎo)入商店；從 'lodash/upperFirst' 導(dǎo)入 upperFirst從 'lodash/camelCase' 導(dǎo)入 camelCase

使用要求。context 搜索 src/components/base 目錄中以 Base 開頭的每個組件。

const requireComponent = require.context(
  '?/組件/基地'，
    真的，
   /Base[AZ]\w+\.(vue|js)$/)

解釋

• 在這里，require context 的第一個參數(shù)是組件文件夾的相對路徑，在我們的例子中是“~/components/base”。

• 第二個參數(shù)決定是否尋找子文件夾。您可以根據(jù)組件層次結(jié)構(gòu)將此參數(shù)設(shè)置為 true/false。

• 我們必須傳遞的第三個參數(shù)是匹配組件文件名的正則表達(dá)式，在我們的例子中是 Base。

我們要將組件名稱轉(zhuǎn)換為 pascalCase 格式。

requireComponent.keys().forEach(文件名 => {
  const componentConfig = requireComponent(文件名)
  const componentName = upperFirst(
    駱駝香煙盒（
      文件名
        。分裂（'/'）
        。流行音樂（）
        .replace(/\.\w+$/, '')
    )
  )

現(xiàn)在我們有了所有組件的名稱，全局注冊它們。

Vue.component(
 componentName,componentConfig.default || 組件配置)

注意：為此，在創(chuàng)建組件時必須遵循命名約定。如果組件名稱中沒有規(guī)則模式，這個技巧可能不起作用。

Github 倉庫

在此處訪問源代碼并隨時克隆存儲庫。您可以按照自己的方式嘗試并探索更多相關(guān)信息。

Github 鏈接： https://github.com/nency-gajjar/best-way-to-register-common-component

結(jié)論

（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機APP開發(fā)，歡迎資訊！