Kendo UI for Vue最新版下載

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

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

解決問(wèn)題的一種方法是像這樣鏈接v-if：

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

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

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

:is指令和<component>

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

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

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

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

此時(shí)，您可以開(kāi)始看到&lt;component>的功能：模板更加簡(jiǎn)潔，很快我們將添加一個(gè)計(jì)算屬性來(lái)封裝邏輯。

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

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

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

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

現(xiàn)在，添加計(jì)算出的屬性和必要的導(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)入所有三個(gè)組件， 請(qǐng)注意出于演示目的，我們還為用戶(hù)對(duì)象創(chuàng)建了一個(gè)本地data() 狀態(tài)。

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