slot内容分发

本意：位置、槽
如果想显示<my-hello>wbs17022</my-hello>中的内容 => wbs17022

<div id="itany">
    <my-hello>wbs17022</my-hello>
</div>
<template id="hello">
    <div>
        <h3>welcome to itany</h3>
        <slot></slot>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#itany',
        components: {
            'my-hello': {
                template: '#hello'
            }
        }
    });
</script>

如果原来<my-hello></my-hello>中没有内容

<div id="itany">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>welcome to itany</h3>
        <slot>如果没有原内容，则显示该内容</slot>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#itany',
        components: {
            'my-hello': {
                template: '#hello'
            }
        }
    });
</script>

如果具有多个solt，则指定名字

<div id="itany">
    <my-hello>
        <ul slot="s1">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <ol slot="s2">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </my-hello>
</div>
<template id="hello">
    <div>
        <slot name="s2"></slot>
        <h3>welcome to itany</h3>
        <slot name="s1"></slot>
    </div>
</template>
<script>
    var vm = new Vue({
        el: '#itany',
        components: {
            'my-hello': {
                template: '#hello'
            }
        }
    });
</script>