Vue提供了一種簡(jiǎn)單的方法來(lái)獲取組件的插槽內(nèi)容，即使用$slots對(duì)象來(lái)訪問(wèn)。這個(gè)對(duì)象可以訪問(wèn)被命名的插槽和默認(rèn)插槽的內(nèi)容。

舉個(gè)例子，在一個(gè)組件模板中，可以有這樣的代碼：

<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>

這個(gè)組件有一個(gè)命名為header的插槽和一個(gè)默認(rèn)插槽。在組件的JavaScript代碼中，可以使用$slots對(duì)象來(lái)獲取這兩個(gè)插槽的內(nèi)容。

export default {
mounted() {
console.log('$slots: ', this.$slots)
}
}

在組件被掛載時(shí)，$slots對(duì)象將打印出如下信息：

$slots:  {
default: [VNode],
header: [VNode]
}

其中，VNode對(duì)象代表插槽內(nèi)容的虛擬節(jié)點(diǎn)。我們可以進(jìn)一步獲取這些節(jié)點(diǎn)的屬性和子節(jié)點(diǎn)：

export default {
mounted() {
console.log('Header slot attributes: ', this.$slots.header[0].data.attrs)
console.log('Default slot children: ', this.$slots.default[0].children)
}
}

這里，data.attrs屬性用于獲取header插槽節(jié)點(diǎn)上的屬性，children屬性獲取默認(rèn)插槽節(jié)點(diǎn)的子節(jié)點(diǎn)。