建站
咨詢
售后
建站咨詢
新聞中心
該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。
目前成都創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、獲嘉網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
#插槽內(nèi)容
Vue 實現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計靈感源自 Web Components 規(guī)范草案，將
它允許你像這樣合成組件：
Add todo
然后在
當(dāng)組件渲染的時候，將會被替換為“Add Todo”。
不過，字符串只是開始！插槽還可以包含任何模板代碼，包括 HTML：
Add todo
或其他組件
如果
Add todo
#渲染作用域
當(dāng)你想在一個插槽中使用數(shù)據(jù)時，例如：
Delete a {{ item.name }}
該插槽可以訪問與模板其余部分相同的實例 property (即相同的“作用域”)。
插槽不能訪問 action 將不起作用：
Clicking here will {{ action }} an item
作為一條規(guī)則，請記住：
父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
#后備內(nèi)容
有時為一個插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會在沒有提供內(nèi)容的時候被渲染。例如在一個
我們可能希望這個 內(nèi)絕大多數(shù)情況下都渲染文本“Submit”。為了將“Submit”作為后備內(nèi)容，我們可以將它放在
現(xiàn)在當(dāng)我在一個父級組件中使用
后備內(nèi)容“Submit”將會被渲染：
但是如果我們提供內(nèi)容：
Save
則這個提供的內(nèi)容將會被渲染從而取代后備內(nèi)容：
#具名插槽
有時我們需要多個插槽。例如對于一個帶有如下模板的
對于這樣的情況，name。這個 attribute 可以用來定義額外的插槽：
一個不帶 name 的
在向具名插槽提供內(nèi)容的時候，我們可以在一個 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
現(xiàn)在 元素中的所有內(nèi)容都將會被傳入相應(yīng)的插槽。
渲染的 HTML 將會是：
Here might be a page title
A paragraph for the main content.
And another one.
注意，v-slot 只能添加在 上 (只有一種例外情況)
#作用域插槽
有時讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的。當(dāng)一個組件被用來渲染一個項目數(shù)組時，這是一個常見的情況，我們希望能夠自定義每個項目的渲染方式。
例如，我們有一個組件，包含 todo-items 的列表。
app.component('todo-list', {
data() {
return {
items: ['Feed a cat', 'Buy milk']
}
},
template: `
-
{{ item }}
`
})我們可能需要替換插槽以在父組件上自定義它：
{{ item }}
但是，這是行不通的，因為只有 item，我們將從其父組件提供槽內(nèi)容。
要使 item 可用于父級提供的 slot 內(nèi)容，我們可以添加一個
-
綁定在 v-slot 來定義我們提供的插槽 prop 的名字：
{{ slotProps.item }}
在這個例子中，我們選擇將包含所有插槽 prop 的對象命名為 slotProps，但你也可以使用任意你喜歡的名字。
#獨占默認(rèn)插槽的縮寫語法
在上述情況下，當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在組件上：
{{ slotProps.item }}
這種寫法還可以更簡單。就像假定未指明的內(nèi)容對應(yīng)默認(rèn)插槽一樣，不帶參數(shù)的 v-slot 被假定對應(yīng)默認(rèn)插槽：
{{ slotProps.item }}
注意默認(rèn)插槽的縮寫語法不能和具名插槽混用，因為它會導(dǎo)致作用域不明確：
{{ slotProps.item }}
slotProps is NOT available here
只要出現(xiàn)多個插槽，請始終為所有的插槽使用完整的基于 的語法：
{{ slotProps.item }}
...
#解構(gòu)插槽 Prop
作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包括在一個傳入單個參數(shù)的函數(shù)里：
function (slotProps) {
// ... 插槽內(nèi)容 ...
} 這意味著 v-slot 的值實際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JavaScript 表達式。你也可以使用 ES2015 解構(gòu)來傳入具體的插槽 prop，如下：
{{ item }}
這樣可以使模板更簡潔，尤其是在該插槽提供了多個 prop 的時候。它同樣開啟了 prop 重命名等其它可能，例如將 item 重命名為 todo：
{{ todo }}
你甚至可以定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形：
{{ item }}
#動態(tài)插槽名
動態(tài)指令參數(shù)也可以用在 v-slot 上，來定義動態(tài)的插槽名：
...
#具名插槽的縮寫
跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
然而，和其它指令一樣，該縮寫只在其有參數(shù)的時候才可用。這意味著以下語法是無效的：
{{ item }}
如果你希望使用縮寫的話，你必須始終以明確插槽名取而代之：
{{ item }}
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0插槽
分享鏈接：http://m.fisionsoft.com.cn/article/dhgdchs.html
