使用单槽

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>