摘要：最近發(fā)布不久的，使用插槽的語(yǔ)法變得更加簡(jiǎn)潔。插槽可用包裹外部的標(biāo)簽或者組件，并允許其他或組件放在具名插槽對(duì)應(yīng)名稱的插槽上。在部分中，監(jiān)聽(tīng)的變化，當(dāng)發(fā)生變化時(shí)，清除狀態(tài)，然后調(diào)用并，當(dāng)成功完成或失敗時(shí)更新?tīng)顟B(tài)。

為了保證的可讀性，本文采用意譯而非直譯。

最近發(fā)布不久的Vue 2.6，使用插槽的語(yǔ)法變得更加簡(jiǎn)潔。 對(duì)插槽的這種改變讓我對(duì)發(fā)現(xiàn)插槽的潛在功能感興趣，以便為我們基于Vue的項(xiàng)目提供可重用性，新功能和更清晰的可讀性。 真正有能力的插槽是什么？

如果你是Vue的新手，或者還沒(méi)有看到2.6版的變化，請(qǐng)繼續(xù)閱讀。也許學(xué)習(xí)插槽的最佳資源是Vue自己的文檔，但是我將在這里給出一個(gè)綱要。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

插槽是Vue組件的一種機(jī)制，它允許你以一種不同于嚴(yán)格的父子關(guān)系的方式組合組件。插槽為你提供了一個(gè)將內(nèi)容放置到新位置或使組件更通用的出口。從一個(gè)簡(jiǎn)單的例子開(kāi)始：

// frame.vue

這個(gè)組件最外層是一個(gè)div。假設(shè)div的存在是為了圍繞其內(nèi)容創(chuàng)建一個(gè)樣式框架。這個(gè)組件可以通用地用于將框架包圍在wq你想要的任何內(nèi)容上，來(lái)看看它是怎么用的。這里的frame組件指的是我們剛才做的組件。

// app.vue

“如果這里沒(méi)有指定任何內(nèi)容，這就是默認(rèn)內(nèi)容”是默認(rèn)內(nèi)容，但是如果像以前那樣使用它，默認(rèn)文本將被img標(biāo)記覆蓋。

可以向組件添加多個(gè)插槽，但是如果這樣做了，那么除了其中一個(gè)之外，其他所有插槽都需要有名稱。如果有一個(gè)沒(méi)有名稱的槽，它就是默認(rèn)槽。下面是如何創(chuàng)建多個(gè)插槽：

// titled-frame.vue

我們保留了相同的默認(rèn)槽，但這次我們添加了一個(gè)名為header的槽，可以在其中輸入標(biāo)題，用法如下：

// app.vue

就像之前一樣，如果我們想將內(nèi)容添加到默認(rèn)槽中，只需將其直接放在titled-frame組件中。但是，要將內(nèi)容添加到命名槽中，我們需要用v-slot指令將代碼包裹在在template標(biāo)記中。在v-slot之后添加冒號(hào)(:)，然后寫(xiě)出要傳遞內(nèi)容的slot的名稱。

注意，v-slot是Vue 2.6的新版本，所以如果你使用的是舊版本，則需要閱讀關(guān)于不推薦的slot語(yǔ)法的文檔。

還需要知道的另一件事是插槽可以將數(shù)據(jù)/函數(shù)傳遞給他們的孩子。 為了證明這一點(diǎn)，我們需要一個(gè)完全不同的帶有插槽的示例組件：創(chuàng)建一個(gè)組件，該組件將當(dāng)前用戶的數(shù)據(jù)提供給其插槽：

// current-user.vue

該組件有一個(gè)名為user的屬性，其中包含關(guān)于用戶的詳細(xì)信息。默認(rèn)情況下，組件顯示用戶的姓，但請(qǐng)注意，它使用v-bind將用戶數(shù)據(jù)綁定到slot。這樣，我們就可以使用這個(gè)組件向它的后代提供用戶數(shù)據(jù)

// app.vue

為了訪問(wèn)傳遞給slot的數(shù)據(jù)，我們使用v-slot指令的值指定作用域變量的名稱。

這里有幾點(diǎn)需要注意：

我們指定了default的名稱，但是不需要為默認(rèn)槽指定名稱。相反，我們可以使用v-slot="slotProps"。

不需要使用slotProps作為名稱，可以隨便叫它什么。

如果只使用默認(rèn)槽，可以跳過(guò)內(nèi)部template標(biāo)記，直接將v-slot指令放到當(dāng)前current-user上。

可以使用對(duì)象解構(gòu)來(lái)創(chuàng)建對(duì)作用域插槽數(shù)據(jù)的直接引用，而不是使用單個(gè)變量名。換句話說(shuō)，可以使用v-slot="{user}"代替v-slot="slotProps"，然后可以直接使用user而不是slotProps.user。

所以，上面的例子可以這樣重寫(xiě)

// app.vue

還有幾點(diǎn)要記住：

可以使用v-bind指令綁定多個(gè)值。

也可以將函數(shù)傳遞到作用域槽。許多庫(kù)使用它來(lái)提供可重用的函數(shù)組件。

v-slot 的別名是#。因此，可以用#header="data" 來(lái)代替 v-slot:header="data"。還可以使用 #header來(lái)代替 v-slot:header(前提:不是作用域插槽時(shí))。對(duì)于默認(rèn)插槽，在使用別名時(shí)需要指定默認(rèn)名稱。換句話說(shuō)，需要這樣寫(xiě) #default="data" 而不是#="data"。

可以從文檔中了解更多的細(xì)節(jié)，但這足以幫助你理解在本文剩下部分中討論的內(nèi)容。

插槽不是為了一個(gè)目的而構(gòu)建的，或者至少如果它們是，它們已經(jīng)超越了最初的意圖，成為做許多不同事物的強(qiáng)大工具。

組件總是被設(shè)計(jì)為可重用的，但是某些模式對(duì)于使用單個(gè)“普通”組件來(lái)實(shí)施是不切實(shí)際的，因?yàn)闉榱俗远x它，需要的props 數(shù)量可能過(guò)多或者需要通過(guò)props傳遞大部分內(nèi)容或其它組件。

插槽可用包裹外部的HTML標(biāo)簽或者組件，并允許其他HTML或組件放在具名插槽對(duì)應(yīng)名稱的插槽上。

對(duì)于的第一個(gè)例子，從簡(jiǎn)單的東西開(kāi)始:一個(gè)按鈕。假設(shè)咱們的團(tuán)隊(duì)正在使用 Bootstrap。使用Bootstrap，按鈕通常與基本的“btn”類和指定顏色的類綁定在一起，比如“btn-primary”。你還可以添加size類，比如"btn-lg"。

為了簡(jiǎn)單起見(jiàn)，現(xiàn)在讓我們假設(shè)你的應(yīng)用使用btn、btn-primary和btn-lg。你不希望總是必須在按鈕上寫(xiě)下這三個(gè)類，或者你不相信新手會(huì)記得寫(xiě)下這三個(gè)類。

在這種情況下，可以創(chuàng)建一個(gè)自動(dòng)包含所有這三個(gè)類的組件，但是如何允許自定義內(nèi)容？ prop 不實(shí)用，因?yàn)樵试S按鈕包含各種HTML，因此我們應(yīng)該使用一個(gè)插槽。

現(xiàn)在我們可以在任何地方使用它，無(wú)論你想要什么內(nèi)容

當(dāng)然，你可以選擇比按鈕更大的東西。 堅(jiān)持使用Bootstrap，讓我們看一個(gè)模態(tài)：

現(xiàn)在，使用它：

上述類型的插槽用例顯然非常有用，但它可以做得更多。

Vue組件并不完全是關(guān)于HTML和CSS的。它們是用JavaScript構(gòu)建的，所以也是關(guān)于函數(shù)的。插槽對(duì)于一次性創(chuàng)建函數(shù)并在多個(gè)地方使用功能非常有用。讓我們回到模態(tài)示例并添加一個(gè)關(guān)閉模態(tài)的函數(shù)

當(dāng)使用此組件時(shí)，可以向footer添加一個(gè)可以關(guān)閉模??態(tài)的按鈕。 通常，在Bootstrap模式的情況下，可以將data-dismiss =“modal”添加到按鈕來(lái)進(jìn)行關(guān)閉。

但我們希望隱藏Bootstrap 特定的東西。 所以我們傳遞給他們一個(gè)他們可以調(diào)用的函數(shù)，這樣使用者就不會(huì)知道我們有使用 Bootstrap 的東西。

最后，可以利用你所知道的關(guān)于使用插槽來(lái)傳遞可重用函數(shù)的知識(shí)，并剝離所有HTML，只使用插槽。這就是無(wú)渲染組件的本質(zhì):一個(gè)只提供函數(shù)而不包含任何HTML的組件。

使組件真正無(wú)渲染可能有點(diǎn)棘手，因?yàn)樾枰帉?xiě)render函數(shù)而不是使用模板來(lái)消除對(duì)根元素的依賴，但它可能并不總是必要的。 來(lái)看看一個(gè)先使用模板的簡(jiǎn)單示例：

這是一個(gè)無(wú)渲染組件的奇怪例子，因?yàn)樗踔翛](méi)有任何JavaScript。這主要是因?yàn)槲覀冋趧?chuàng)建一個(gè)內(nèi)置無(wú)渲染函數(shù)的預(yù)配置可重用版本:transition。

是的，Vue有內(nèi)置的無(wú)渲染組件。這個(gè)特殊的例子取自Cristi Jora的一篇關(guān)于可重用transition的文章，展示了一種創(chuàng)建無(wú)渲染組件的簡(jiǎn)單方法，該組件可以標(biāo)準(zhǔn)化整個(gè)應(yīng)用程序中使用的 transition。

對(duì)于我們的另一個(gè)示例，我們將創(chuàng)建一個(gè)組件來(lái)處理切換 Promise 的不同狀態(tài)中顯示的內(nèi)容: pending、resolved 和 failed。這是一種常見(jiàn)的模式，雖然它不需要很多代碼，但是如果沒(méi)有為了可重用性而提取邏輯，它會(huì)使很多組件變得混亂。

這是怎么回事,小老弟?首先，請(qǐng)注意，該組件接收一個(gè)Promise 類型參數(shù)。在watch部分中，監(jiān)聽(tīng)promise的變化，當(dāng)promise發(fā)生變化時(shí)，清除狀態(tài)，然后調(diào)用 then 并 catch promise，當(dāng) promise 成功完成或失敗時(shí)更新?tīng)顟B(tài)。

然后，在模板中，我們根據(jù)狀態(tài)顯示一個(gè)不同的槽。請(qǐng)注意，我們沒(méi)有保持它真正的無(wú)渲染，因?yàn)槲覀冃枰粋€(gè)根元素來(lái)使用模板。我們還將data和error傳遞到相關(guān)的插槽范圍。

...

我們將somePromise傳遞給無(wú)渲染組件。 然后等待它完成，對(duì)于 pending 的插槽，顯示“請(qǐng)求中...”。 如果成功，顯示“Resolved：對(duì)應(yīng)的值”。 如果失敗，顯示“已Rejected：失敗的原因”。 現(xiàn)在我們不再需要跟蹤此組件中的promise的狀態(tài)，因?yàn)樵摬糠直焕龅剿约旱目芍赜媒M件中。

那么，我們可以做些什么來(lái)繞過(guò)promised.vue中的插槽？ 要?jiǎng)h除它，我們需要?jiǎng)h除template部分并向我們的組件添加render函數(shù)：

render () {
  if (this.error) {
    return this.$scopedSlots["rejected"]({error: this.error})
  }

  if (this.resolved) {
    return this.$scopedSlots["resolved"]({data: this.data})
  }

  return this.$scopedSlots["pending"]()
}

這
里沒(méi)有什么太復(fù)雜的。我們只是使用一些if塊來(lái)查找狀態(tài)，然后返回正確的作用域slot(通過(guò)this.$ scopedslot ["SLOTNAME"](…))，并將相關(guān)數(shù)據(jù)傳遞到slot作用域。當(dāng)你不使用模板時(shí)，可以跳過(guò)使用.vue文件擴(kuò)展名，方法是將JavaScript從script標(biāo)記中提取出來(lái)，然后將其放入.js文件中。在編譯這些Vue文件時(shí)，這應(yīng)該會(huì)給你帶來(lái)非常小的性能提升。

Vue的插槽將基于組件的開(kāi)發(fā)提升到了一個(gè)全新的水平，雖然本文已經(jīng)展示了許多可以使用插槽的好方法，但還有更多的插槽。歡迎留言討論。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。