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

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

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

插槽是什么？

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

// frame.vue<template> <div class="frame"> <slot></slot> </div></template>

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

// app.vue<template> <frame><img src="an-image.jpg"></frame></template>

在開始和結(jié)束 frame 標(biāo)記之間的內(nèi)容將插入到插槽所在的 frame 組件中，替換 slot 標(biāo)記。這是最基本的方法。還可以簡(jiǎn)單地通過填充指定要放入槽中的默認(rèn)內(nèi)容

// frame.vue<template> <div class="frame"> <slot>如果這里沒有指定任何內(nèi)容，這就是默認(rèn)內(nèi)容</slot> </div></template>

所以現(xiàn)在如果我們這樣使用它：

// app.vue<template> <frame /></template>

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

多個(gè)/命名的插槽

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

// titled-frame.vue<template> <div class="frame"> <header><h2> <slot name="header">Title</slot> </h2></header> <slot>如果這里沒有指定任何內(nèi)容，這就是默認(rèn)內(nèi)容</slot> </div></template>

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

// app.vue<template> <titled-frame> <template v-slot:header> <!-- The code below goes into the header slot --> My Image's Title </template> <!-- The code below goes into the default slot --> <img src="an-image.jpg"> </titled-frame></template>