• 可以使用 v-bind 指令綁定多個(gè)值。
• 也可以將函數(shù)傳遞到作用域槽。許多庫使用它來提供可重用的函數(shù)組件。
• v-slot 的別名是 # 。因此，可以用 #header="data" 來代替 v-slot:header="data" 。還可以使用 #header 來代替 v-slot:header (前提:不是作用域插槽時(shí))。對(duì)于默認(rèn)插槽，在使用別名時(shí)需要 指定默認(rèn)名稱 。換句話說，需要這樣寫 #default="data" 而不是 #="data" 。

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

你能用插槽做什么？

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

可重用的模式

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

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

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

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

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

<!-- my-button.vue -->
<template>
 <button class="btn btn-primary btn-lg">
 <slot>Click Me!</slot>
 </button>
</template>

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

<!-- 使用 my-button.vue -->
<template>
 <my-button>
 <img src="/img/awesome-icon.jpg"> 我是小智！
 </my-button>
</template>

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

<!-- my-modal.vue -->
<template>
<div class="modal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <slot name="header"></slot>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body">
 <slot name="body"></slot>
 </div>
 <div class="modal-footer">
 <slot name="footer"></slot>
 </div>
 </div>
 </div>
</div>
</template>

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

<!-- 使用 my-modal.vue -->
<template>
 <my-modal>
 <template #header>
 <h5>大家最棒!</h5>
 </template>
 <template #body>
 <p>大家加油</p>
 </template>
 <template #footer>
 <em>大家好樣的!</em>
 </template>
 </my-modal>
</template>

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

復(fù)用函數(shù)

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

<!-- my-modal.vue -->
<template>
<div class="modal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <slot name="header"></slot>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body">
 <slot name="body"></slot>
 </div>
 <div class="modal-footer"> 
 <slot name="footer" :closeModal="closeModal"></slot>
 </div>
 </div>
 </div>
</div>
</template>

<script>
export default {
 //...
 methods: {
 closeModal () {
 // 關(guān)閉對(duì)話框時(shí)，需要做的事情
 }
 }
}
</script>

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

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

<!-- 使用 my-modal.vue -->
<template>
 <my-modal>
 <template #header>
 <h5>Awesome Interruption!</h5>
 </template>
 <template #body>
 <p>大家加油！</p>
 </template>
 <template #footer="{closeModal}">
 <button @click="closeModal">
 點(diǎn)我可以關(guān)閉煩人的對(duì)話框
 </button>
 </template>
 </my-modal>
</template>

無渲染組件

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

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

<template>
 <transition name="fade" v-bind="$attrs" v-on="$listeners">
 <slot></slot>
 </transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}
</style>

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

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

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

<!-- promised.vue -->
<template>
 <span>
 <slot name="rejected" v-if="error" :error="error"></slot>
 <slot name="resolved" v-else-if="resolved" :data="data"></slot>
 <slot name="pending" v-else></slot>
 </span>
</template>
<script>
export default {
 props: {
 promise: Promise
 },
 data: () => ({
 resolved: false,
 data: null,
 error: null
 }), 
 watch: {
 promise: {
 handler (promise) {
 this.resolved = false
 this.error = null
 if (!promise) {
  this.data = null
  return
 }
 promise.then(data => {
  this.data = data
  this.resolved = true
 })
 .catch(err => {
  this.error = err
  this.resolved = true
 })
 },
 immediate: true
 }
 }
}
</script>

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

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

<template>
 <div>
 <promised :promise="somePromise">
 <template #resolved="{ data }">
 Resolved: {{ data }}
 </template>
 <template #rejected="{ error }">
 Rejected: {{ error }}
 </template>
 <template #pending>
  請(qǐng)求中...
 </template>
 </promised>
 </div>
</template>
...

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

那么，我們可以做些什么來繞過 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']()
}

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

總結(jié)

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

以上所述是小編給大家介紹的vue 2.6 中 slot 的新用法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！