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>