這篇文章主要介紹Vue.js中如何使用動態(tài)組件，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十載，專業(yè)且經(jīng)驗豐富。十載網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為上千余家中小企業(yè)提供了成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)解決方案，按需定制制作，設(shè)計滿意，售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

本文介紹了如何在Vue.js中引用組件中的HTML元素。您可以通過使用Vue路由器或創(chuàng)建動態(tài)組件來切換視圖或組件模板。

Vue路由器用于在DOM中的視圖或組件模板之間導(dǎo)航。要使用Vue路由器，請在route組件中定義路由，并向Vue表明應(yīng)該在事件(如單擊)上掛載新組件。

這是處理用戶界面內(nèi)的邊欄和菜單組件中的導(dǎo)航的正確方法。

如果您希望在DOM中掛載的兩個任意組件之間進(jìn)行切換而不需要創(chuàng)建路由，那么您可能需要使用動態(tài)組件。

動態(tài)組件

Vue動態(tài)組件允許用戶在兩個或多個組件之間進(jìn)行切換而無需路由，甚至在切換回初始組件時保留數(shù)據(jù)狀態(tài)。

其核心思想是讓用戶在不使用路由器的情況下動態(tài)地掛載和卸載用戶界面中的組件。

為什么動態(tài)組件很重要?

在設(shè)計用戶界面時，您需要某種形式的靈活性來顯示或隱藏基于應(yīng)用程序狀態(tài)的嵌套組件。動態(tài)組件以高效、簡單的方式提供了這個平臺。

該特性為您節(jié)省了大量代碼，因為您可以使用v-if和v-else等Vue條件結(jié)構(gòu)輕松實現(xiàn)動態(tài)組件。您可以使用條件結(jié)構(gòu)來實現(xiàn)動態(tài)組件，方法是使用占位符來輕松地將邏輯綁定到組件。

這種方法可以確保您的演示始終是干凈和明確的。

才能在Vue中創(chuàng)建動態(tài)組件。在你的電腦中，你將需要以下資料:

已安裝Node.js版本10.x及更高版本。 您可以通過在終端/命令提示符下運(yùn)行以下命令來驗證您是否擁有Node.js 10.x版：

node -v

一個代碼編輯器(推薦使用Visual Studio)。

Vue的最新版本，已全局安裝在您的計算機(jī)上。

您的計算機(jī)上已安裝Vue CLI 3.0。 為此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后，安裝一個新的:

npm install -g @vue/cli

動態(tài)組件的語法

Vue為動態(tài)組件提供了一個特殊的模板元素，簡稱為component。語法是這樣的:

組件元素也可以是一個自關(guān)閉標(biāo)簽:

第一個選項最適合瀏覽兼容性。

演示

下載starter項目并在VS代碼中打開它，以獲得一些動態(tài)組件的示例。starter項目允許您訪問一個現(xiàn)有的測試組件，創(chuàng)建第二個測試組件，并在兩者之間進(jìn)行切換。

導(dǎo)航到components文件夾并創(chuàng)建一個新文件。 將文件命名為Test2.vue并將以下代碼塊復(fù)制到文件中：

h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

現(xiàn)在您有了第二個組件，轉(zhuǎn)到App.vue文件并注冊該組件:

兩個測試組件現(xiàn)在嵌套在根應(yīng)用程序組件中。如果只想掛載一個組件，然后動態(tài)切換到另一個組件，則必須創(chuàng)建一個動態(tài)組件。

將下面的代碼塊復(fù)制到app.vue文件的模板部分:

接下來，使用以下serve命令運(yùn)行應(yīng)用程序:

npm run serve

您將看到只顯示Test 1組件。

如果僅在模板中指定了Test 1元素，這正是您將獲得的響應(yīng)。 為了使組件具有動態(tài)性，我們可以使用v-bind指令將其綁定到set屬性。

您的組件現(xiàn)在與數(shù)據(jù)中的組件屬性綁定。如果您將組件切換到Test2，它將自動掛載Test2組件。

在瀏覽器上測試一下。

添加方法調(diào)用

您可以添加方法調(diào)用來控制組件動態(tài)顯示的邏輯。組件元素允許您訪問Vue實例中的每個構(gòu)造。

下面是一個切換這兩個組件的小方法的例子:

切換時保持?jǐn)?shù)據(jù)值有效

在Vue團(tuán)隊構(gòu)建這個特性時，他們選擇擴(kuò)展它的功能，包括存儲每個狀態(tài)的數(shù)據(jù)值。

為了存儲這些數(shù)據(jù)，Vue提供了一個名為keep-alive的模板元素。使用keep-alive，您可以確保在從一個組件切換回另一個組件后，您的組件狀態(tài)保持原樣。

例如，如果您單擊某個鏈接或在文本框中輸入一個值，然后切換組件，那么keep-alive會將您帶回到切換回來時使用的相同鏈接或文本框。

要啟用keep-alive，請轉(zhuǎn)到app.vue文件的模板部分，并使用keep-alive元素包裝組件元素:

要查看它是否工作，請將表單元素添加到測試中。vue文件，在模板部分添加如下代碼塊:

保存所有項目文件后，再次運(yùn)行應(yīng)用程序。在輸入框中鍵入，切換組件，并切換回原始組件。您將注意到在切換組件之前輸入的值與之前輸入的值完全相同。

以上是“Vue.js中如何使用動態(tài)組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！