使用命名插槽

Created: November-22, 2018

命名的插槽與單個插槽的工作方式類似，但允許你將內容分發到子元件模板中的不同區域。

從前面的示例中獲取 page 元件，但修改它的模板，如下所示：

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <aside>
            <slot name="sidebar"></slot>
        </aside>
        <main>
            <slot name="content"></slot>
        </main>
    </body>
</html>

使用 page 元件時，我們現在可以通過 slot 屬性確定放置內容的位置：

<page>
    <p slot="sidebar">This is sidebar content.</p>
    <article slot="content"></article>
</page>

結果頁面將是：

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <aside>
            <p>This is sidebar content.</p>
        </aside>
        <main>
            <article></article>
        </main>
    </body>
</html>

如果定義了 slot 而沒有 name 屬性，則放置在未指定 slot 屬性的元件標記內的任何內容將被放置到該槽中。

請參閱 Vue.js 官方文件中的多插入示例。