什麼是插槽

插槽提供了一種將內容從父元件分發到子元件的便捷方式。此內容可以是文字,HTML 甚至其他元件。

有時可以將插槽視為將內容直接注入子元件模板的方法。

當父元件下面的元件組合並不總是相同時,插槽特別有用。

以下示例我們有一個 page 元件。頁面的內容可以基於該頁面是否顯示例如文章,部落格文章或表格而改變。

文章

<page>
    <article></article>
    <comments></comments>
</page>

部落格文章

<page>
    <blog-post></blog-post>
    <comments></comments>
</page>

形成

<page>
    <form></form>
</page>

注意 page 元件的內容如何變化。如果我們不使用插槽,這將更加困難,因為模板的內部部分將被修復。

請記住: “父模板中的所有內容都是在父作用域中編譯的;子模板中的所有內容都是在子作用域中編譯的。”