slot

文档：http://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容

Slot用来占个位置。

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa>
            <ul>
                <li>aaaaa</li>
                <li>bbbbb</li>
            </ul>
        </aaa>
        <hr>
        <aaa></aaa>
    </div>

    <template id="aaa">
        <div>
            <h1>xxxx</h1>
            <slot>这是默认的情况</slot>
            <p>welcome</p>
        </div>
    </template>

    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            components:{
                'aaa':{
                    template: '#aaa',
                },
            }
        });
    </script>

上面代码我们使用了2次aaa 组件，一个是组件里还有其他模板内容，另一个没有。我们来看一下在页面上的效果。

<slot>这是默认的情况</slot> 在模板上起到了“占位”的作用，如果在使用组件的时候，组件名里还包含其他内容<aaa>xxxxx</aaa> ，其中的内容就会替换<slot> 的位置。

多个slot

    <template id="aaa">
        <div>
            <h1>xxxx</h1>
            <slot name="ul-slot">这是默认的情况</slot>
            <slot name="ol-slot">这是默认的情况2</slot>
            <p>welcome</p>
        </div>
    </template>

给slot起名。

    <div id="box">
        <!-- 使用组件aaa -->
        <aaa>
            <ul slot="ul-slot">
                <li>aaaaa</li>
                <li>bbbbb</li>
            </ul>
            <ol slot="ol-slot">
                <li>AAAAAA</li>
                <li>BBBBBB</li>
            </ol>
        </aaa>
        <hr>
        <aaa></aaa>
    </div>