當您發(fā)現(xiàn)希望模板的特定部分可以是動態(tài)的，并根據(jù)在其他地方計算出的某些條件在一個或多個組件之間切換時，Vue開發(fā)可以幫助您實現(xiàn)！

以一個僅在用戶注冊和登錄時才呈現(xiàn)某些特定內(nèi)容的網(wǎng)站為例，但是如果該特定用戶具有付費訂閱，則該網(wǎng)站也將顯示第三個版本。

解決問題的一種方法是像這樣鏈接v-if：

這當然可以工作，但是即使具有良好的成分組成，它也可能很快開始成為問題。如果邏輯變得更加復雜，或者隨著時間的推移必須添加其他組件，則模板將變得擁擠且難以維護。

另一個常見的情況是使用一個API端點來告訴您它希望前端在屏幕上呈現(xiàn)什么樣的組件（一種模式或清單），這種特殊情況可能會導致一些功能非常強大的應(yīng)用程序，但是我們必須深入研究如何創(chuàng)建動態(tài)組件。

:is指令和

Vue為我們提供了一個特殊的組件和一個用于處理此類問題的指令，即組件。 此特殊組件的操作就像模板中的占位符，它將呈現(xiàn)其中的任何類型的元素 –從諸如Guest之類的自定義組件到諸如

• 之類的基本HTML元素。

   

  為了使我們能夠使用，我們必須將名為is的屬性傳遞給它。該指令需要一個值，該值可以是String或Object，已注冊的組件或組件配置對象，讓我們先來看看如何使用字符串。

  讓我們通過使用重新思考前面的示例，模板將簡化很多，如下所示：

   

  此時，您可以開始看到的功能：模板更加簡潔，很快我們將添加一個計算屬性來封裝邏輯。

  將創(chuàng)建一個計算屬性userComponent，它將使知道應(yīng)呈現(xiàn)哪個組件。為此，我們將邏輯移至此計算屬性，并返回一個字符串，其中包含應(yīng)呈現(xiàn)的組件的名稱。

  重要說明：請注意，在使用字符串方法時，需要將組件作為全局組件注冊到應(yīng)用程序中，或者導入到您的組件中，并在呈現(xiàn)它們的組件選項下注冊。

  您將在下面看到的另一種方法是在計算屬性中返回導入的組件本身。

  如果您忘記這樣做，Vue將發(fā)出警告：“Unknown component : did you register the component correctly?”

  現(xiàn)在，添加計算出的屬性和必要的導入。

  在頂部像往常一樣導入所有三個組件，請注意出于演示目的，我們還為用戶對象創(chuàng)建了一個本地data() 狀態(tài)。

  在userComponent計算的prop內(nèi)部，正在傳遞模板中先前的邏輯。您已經(jīng)了解到，這兩種方法更具可讀性，最重要的是更加靈活。您可以使用Axios或Vuex，甚至可以從此處的應(yīng)用程序中的文件加載動態(tài)模式，以定義應(yīng)呈現(xiàn)的組件。