Kendo UI for Vue最新版下載

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

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

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

<template>
<div>
<Guest v-if="!user" />
<User v-if="user && !user.subscription" />
<Member v-if="user && user.subscription" />
</div>
</template>

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

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

:is指令和<component>

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

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

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

<template>
<component :is="userComponent" />
</template>

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

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

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

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

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

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

<script>
import Guest from './components/Guest';
import User from './components/User';
import Member from './components/Member';

export default {
data() {
return {
user: null
} 
},
computed: {
userComponent() {
if (!this.user) return Guest;
if (!this.user.subscription) return User;

return Member;
}
}
};
</script>

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

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