Slot in Vuejs

[Ice]

Slot in Vuejs

什么是Slot

Slot可以看作一个简单的占位标签，同时自己可以包含内容。
其内容将在父组件没有内容时展示，而当父组件有内容时被抛弃。

单Slot

在组件 side-bar 中

<div id="sidebar">
    <slot>I'm side-bar default text</slot>
</div>

在使用组件 side-bar 时

无内容：

<div id="component">
    <side-bar></sider-bar>
</div>

<!-- ====> 以上得到的编译结果是 -->
<!-- 由于在使用side-bar时，没有设置内容，所以slot中的内容将显示 -->
<div id="component">
    <div id="sidebar">
        I'm side-bar default text
    </div>
</div>

有内容：

<div id="component">
    <side-bar>
        <h2>I'm title</h2>  <!-- 此处将会替换slot -->
    </sider-bar>
</div>

<!-- ====> 以上得到的编译结果是 -->
<!-- 由于在使用side-bar时，设置了内容，所以slot中的内容将被替换 -->
<div id="component">
    <div id="sidebar">
        <h2>I'm title</h2> <!-- 此处为替换结果 -->
    </div>
</div>

具名Slots

在组件 side-bar 中

<div id="sidebar">
    <slot name="title">I'm side-bar title</slot>
    <slot name="content">I'm side-bar content</slot>
</div>

<div id="component">
    <side-bar>
        <h2 slot="title">I'm title</h2>
        <p slot="content">I'm content</p>
    </sider-bar>
</div>

<!-- ====> 以上得到的编译结果是 -->
<!-- 由于在使用side-bar时，设置了内容并设置了name，所以slot中的内容将被替换 -->
<div id="component">
    <div id="sidebar">
        <h2>I'm title</h2> <!-- 此处为替换结果 -->
        <p>I'm content</p> <!-- 此处为替换结果 -->
    </div>
</div>

可以设置多个标签对应同一个slot

<div id="component">
    <side-bar>
        <h2 slot="title">I'm title</h2>
        <h3 slot="title">I'm 2nd title</h3>
        <p slot="content">I'm content</p>
    </sider-bar>
</div>

<!-- ====> 以上得到的编译结果是 -->
<div id="component">
    <div id="sidebar">
        <h2>I'm title</h2> <!-- 此处为替换结果 -->
        <h3>I'm 2nd title</h3> <!-- 此处同样对应的替换结果 -->
        <p>I'm content</p> <!-- 此处为替换结果 -->
    </div>
</div>