本篇內(nèi)容介紹了“怎么用Vue命名插槽創(chuàng)建多個(gè)模板插槽”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供馬邊彝族網(wǎng)站建設(shè)、馬邊彝族做網(wǎng)站、馬邊彝族網(wǎng)站設(shè)計(jì)、馬邊彝族網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、馬邊彝族企業(yè)網(wǎng)站模板建站服務(wù)，十多年馬邊彝族做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Vue 插槽允許將父組件中的內(nèi)容注入到子組件中。

這是最基本的示例，如果我們不提供父級(jí)的任何slot 內(nèi)容，則我們將放在其中的任何內(nèi)容都會(huì)作為后備內(nèi)容。

// ChildComponent.vue 

你組件代碼：

// ParentComponent.vue 

編譯后，我們的 DOM 將如下所示

 替換 slot 的默認(rèn)內(nèi)容 

我們還可以將父組作用域內(nèi)的任何數(shù)據(jù)寫在 slot 區(qū)域中。例如，父組件有一個(gè)名為title的數(shù)據(jù)字段，我們可以使用以下代碼將其注入到子組件中：

// ParentComponent.vue    

為什么我們需要命名插槽

在Vue中使用命名插槽有兩個(gè)步驟：

• 使用name屬性從子組件中命名 slot

• 使用v-slot指令從父組件向這些命名插槽提供內(nèi)容

默認(rèn)情況下，不給插槽顯式的name屬性時(shí)，它有默認(rèn)名字是default。

為了給我們的 slot 起個(gè)名字，元素具有一個(gè)特殊的name屬性，可以讓我們?cè)诙鄠€(gè)插槽之間進(jìn)行區(qū)分。

在下面的Article.vue 中，我們命名三個(gè) slot

// Article.vue - Child Component 

然后，在父組件中，我們可以在元素上使用v-slot指令指定我們想要注入內(nèi)容的slot。

// ParentComponent.vue 

因?yàn)檫@是沒有指定 slot 的名稱，所以顯示的是 slot 默認(rèn)的內(nèi)容。

要解決這個(gè)問(wèn)題，可以使用v-slot，指定的名稱要確保名稱與我們?cè)谧咏M件中聲明的名稱完全匹配。

        我的 content         我的 comments