Vue.js 插槽

插槽幫助您在組件中定位內容，並允許父組件對其進行排列。

一個組件可以完全負責生成其輸出，就像這個例子：

Vue.component('user-name', {
 props: ['name'],
 template: '<p>Hi {{ name }}</p>'
})

或者它也可以讓父組件注入任何類型的內容，使用插槽。

什麼是插槽？它是組件輸出中的一個保留空間，等待填充。

您可以通過將 <slot></slot> 放入組件模板中來定義一個插槽：

Vue.component('user-information', {
 template: '<div class="user-information"><slot></slot></div>'
})

使用這個組件時，添加在開始和結束標籤之間的任何內容將添加到插槽佔位符中：

<user-information>
 <h2>Hi!</h2>
 <user-name name="Flavio"></user-name>
</user-information>

如果您將任何內容放置在 <slot></slot> 標籤中，則該內容將作為默認內容，以防沒有傳入內容。

一個復雜的組件布局可能需要更好的方式來組織內容，同時還有多個插槽。

這就是為什麼 Vue 為我們提供了 具名插槽。

具名插槽

使用具名插槽，您可以將插槽的各個部分分配給組件模板布局中的特定位置，並使用 slot 屬性為任何標籤分配內容。

任何位於模板標籤外部的內容都將添加到主要的 slot 中。

為方便起見，在此示例中，我在 page 單文件組件中使用了一個模板：

<template>
 <div>
 <main>
 <slot></slot>
 </main>
 <aside>
 <slot name="sidebar"></slot>
 </aside>
 </div>
</template>

這裡是如何在父組件中提供插槽內容：

<page>
 <template v-slot:sidebar>
 <ul>
 <li>Home</li>
 <li>Contact</li>
 </ul>
 </template>

 <h2>Page title</h2>
 <p>Page content</p>
</page>

還有一個方便的簡寫，即 #：

<page>
 <template #sidebar>
 <ul>
 <li>Home</li>
 <li>Contact</li>
 </ul>
 </template>

 <h2>Page title</h2>
 <p>Page content</p>
</page>

注意：Vue 2.6 中已將 slot 屬性棄用，改用 v-slot，並要求將其添加到 template 標籤中（而 slot 可以應用於任何標籤）

作用域插槽

在插槽中，我們無法從父組件中訪問子組件中包含的數據。

Vue 識別到這種使用場景並為我們提供了一種方法：

<template>
 <div>
 <main>
 <slot v-bind:dogName="dogName"></slot>
 </main>
 </div>
</template>

<script>
export default {
 name: 'Page',
 data: function() {
 return {
 dogName: 'Roger'
 }
 }
}
</script>

在父組件中，可以使用以下方式訪問我們傳遞的狗名稱：

<page>
 <template v-slot="slotProps">
 {{ slotProps.dogName }}
 </template>
</page>

slotProps 只是一個變量，我們用它來訪問傳遞的 props。您也可以通過即時解構對象來避免設置變量來保存傳遞給子組件的 props：

<page>
 <template v-slot="{ dogName }">
 {{ dogName }}
 </template>
</page>

具名插槽#

作用域插槽#

具名插槽

作用域插槽