在Vue中， $slots是用于控制頁面布局的非常強大的工具，它可以用來動態地提供給組件內容。$slots不僅可以在父組件中定義和使用，而且也可以在子組件中定義和使用。

Vue.component('my-component', {
template: `
`
});

上面的代碼中，我們定義了一個my-component組件，它包含一個名稱為header-title的slot和一個默認的slot。在組件中使用這些slots時，需要將它們定義在組件模板中。然后在使用組件時，我們可以動態地插入內容到這些slots中。

這是頭部標題
這是默認內容

上面的代碼中，我們使用了my-component組件，并在它的slots中添加了內容，這些內容會被動態地插入到組件模板中。

在這個例子中，我們設置了一個名稱為header-title的slot，它包含了一個h2標簽。我們也設置了一個默認的slot，它包含了一個p標簽。在my-component組件模板中，我們使用了<slot name="header-title"></slot>和<slot></slot>來插入這些slots中的內容。

當Vue編譯模板時，它會將slots轉換為對應的虛擬節點，并傳遞到組件實例中。組件實例可以通過訪問this.$slots來訪問這些slots。

Vue.component('my-component', {
mounted() {
console.log(this.$slots);
}
});

上面的代碼中，我們在my-component組件的mounted生命周期函數中訪問this.$slots來打印組件中的slots。

需要注意的是，如果組件沒有定義任何slot，則訪問this.$slots將會是一個空對象。如果在組件中訪問一個不存在的slot，則會返回undefined。

總的來說，$slots是一個強大的動態插入內容的工具，在處理動態組件時非常實用。