使用單槽

Created: November-22, 2018

當子元件僅在其模板中定義一個 slot 時，將使用單個插槽。上面的 page 元件使用單個插槽來分發內容。

使用單個插槽的 page 元件模板示例如下：

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <slot>
            This will only be displayed if there is no content
            to be distributed.
        </slot>
    </body>
</html>

為了說明插槽的工作原理，我們可以按如下方式設定頁面。

<page>
    <p>This content will be displayed within the page component</p>
</page>

最終結果將是：

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This content will be displayed within the page component</p>
    </body>
</html>

如果我們沒有在 page 標籤之間放置任何東西，而是使用 <page></page>，我們將產生以下結果，因為 page 元件模板中的 slot 標籤之間存在預設內容。

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        This will only be displayed if there is no content
        to be distributed.
    </body>
</html>