作用域插槽

原來插槽的使用，在頁面上顯示的是lastName"子龍"：

有時讓插槽內容能夠訪問子元件中才有的資料是很有用的。例如，設想一個帶有如下模板的 current-user 元件：

現在在頁面上顯示的是lastname"子龍"

<span>  <slot>{{ user.lastName }}</slot></span>

我們可能想換掉備用內容，用名而非姓來顯示。如下：

我們想把頁面上顯示的是firstName"趙"，但又不改變元件內容

<current-user>  {{ user.firstName }}</current-user>

然而上述程式碼不會正常工作，因為只有 元件可以訪問到 user 而我們提供的內容是在父級渲染的。

解決方式

為了讓 user 在父級的插槽內容中可用，我們可以將 user 作為 slot 元素的一個 attribute 繫結上去

將子元件current-user的模板更改為：

獨佔預設插槽的縮寫語法

在上述情況下，當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在元件上：

<current-user v-slot:default="slotProps">  {{ slotProps.user.firstName }}</current-user>

這種寫法還可以更簡單。就像假定未指明的內容對應預設插槽一樣，不帶引數的 v-slot 被假定對應預設插槽：

<current-user v-slot="slotProps">  {{ slotProps.user.firstName }}</current-user>

注意預設插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確：

<current-user>  <template v-slot:default="slotProps">    {{ slotProps.user.firstName }}  </template>  <template v-slot:other="otherSlotProps">    ...  </template></current-user>

解構插槽 Prop

作用域插槽的內部工作原理是將你的插槽內容包括在一個傳入單個引數的函式裡：

function (slotProps) {  // 插槽內容}

這意味著 v-slot 的值實際上可以是任何能夠作為函式定義中的引數的 JavaScript 表示式。所以在支援的環境下 (單檔案元件或現代瀏覽器)，你也可以使用 ES2015 解構來傳入具體的插槽 prop，如下：

<current-user v-slot="{ user }">  {{ user.firstName }}</current-user>

這樣可以使模板更簡潔，尤其是在該插槽提供了多個 prop 的時候。它同樣開啟了 prop 重新命名等其它可能，例如將 user 重新命名為 person：

<current-user v-slot="{ user: person }">  {{ person.firstName }}</current-user>

你甚至可以定義後備內容，用於插槽 prop 是 undefined 的情形：

<current-user v-slot="{ user = { firstName: 'Guest' } }">  {{ user.firstName }}</current-user>