vm.$slots是一個(gè)對象，鍵名是所有具名slot的名稱枯途，加上一個(gè)default，而鍵值則是一個(gè)存放VNode節(jié)點(diǎn)的數(shù)組。
官網(wǎng)上提供的解釋如下：
用來訪問被
slot分發(fā)的內(nèi)容察郁。每個(gè)具名slot有其相應(yīng)的屬性
（例如：slot="foo"中的內(nèi)容將會(huì)在vm.$slots.foo中被找到）
default 屬性包括了所有沒有被包含在具名 slot 中的節(jié)點(diǎn)。
示例如下：
<blog-post>
<h1 slot="header">
我屬于header
</h1>
<h1 slot="header">
我也屬于header
</h1>
<p>
我誰都不屬于
</p>
<p slot="footer">
我屬于footer
</p>
<p>
誰來認(rèn)領(lǐng)我
</p>
</blog-post>
在blog-post標(biāo)簽里转唉，元素們被這樣的設(shè)置：
- 屬于名稱為
header的slot的有2個(gè)<h1> - 屬于名稱為
footer的slot的有1個(gè)<p> - 屬于不具名
slot（會(huì)歸到default里）的有2個(gè)<p>
嘗試查看blog-post組件的$slots皮钠，得到結(jié)果如下：
vm.$slots
可以看到：
-
header對應(yīng)一個(gè)長為2的數(shù)組，就是剛才那2個(gè)<h1>對應(yīng)的VNode節(jié)點(diǎn)赠法。 -
footer對應(yīng)一個(gè)長為1的數(shù)組麦轰，就是剛才那1個(gè)<p>對應(yīng)的VNode節(jié)點(diǎn)。 -
default對應(yīng)一個(gè)長為6的數(shù)組砖织，其中有4個(gè)是空的VNode節(jié)點(diǎn)（產(chǎn)生的原因尚不清楚）款侵，2個(gè)是剛才沒有指定slot屬性的<p>對應(yīng)的VNode節(jié)點(diǎn)。
如果像下面這樣侧纯，指定了render函數(shù)的話新锈，就可以手動(dòng)創(chuàng)建出html標(biāo)簽。
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
createElement(html標(biāo)簽名, VNode節(jié)點(diǎn)數(shù)組)會(huì)編譯出一個(gè)指定的html標(biāo)簽眶熬，然后把VNode節(jié)點(diǎn)數(shù)組里非空的VNode節(jié)點(diǎn)編譯回原來的html內(nèi)容妹笆。其結(jié)果就相當(dāng)于把原來的那些<blog-post>標(biāo)簽之間的內(nèi)容根據(jù)它們的slot屬性，放進(jìn)了指定的標(biāo)簽里娜氏。
剛剛的例子里晾浴，最終編譯出的html結(jié)構(gòu)如下：
html結(jié)構(gòu)
