slot

Vue的3个API：props传数据，events触发事件，slot内容分发；

需要让组件组合使用，混合父组件的内容和子组件的模板是，就需要slot，称为内容分发；

单个slot用法：

在子组件内使用slot可以开启一个卡槽，在父组件模板里，插入在子组件标签内的所有内容将替代子组件slot标签以及他的内容:

<div id="app">
    <child-component>
        <!--<p>分发的内容</p>-->
        <!--<p>more</p>-->
    </child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    Vue.component('child-component',{
        template:'\
        <div>\
            <slot>\
                <p>如果父组件没有内容插入，我将作为默认出现</p>\
            </slot>\
        </div>'
    });
    var app=new Vue({
        el:'#app'
    })
</script>

具名slot使用：

<div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <p>正文内容</p>
        <p>更多的正文内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        Vue.component('child-component',{
            template:'\
            <div class="container">\
                <div class="header">\
                    <slot name="header"></slot>\
                </div>\
                <div class="main">\
                     <slot></slot>\
                </div>\
                <div class="footer">\
                    <slot name="footer"></slot>\
            </div>\
            </div>'
        });
        var app=new Vue({
            el:'#app'
        })
    </script>

结果为：

代码解析：没有使用那么特性的将作为默认slot出现，父组件没有使用slot特性的元素与内容都会出现在这里。如果父组件没有使用slot特性的元素与内容都将被抛弃。

访问slot：

通过$slot可以访问某个具名slot，this.$slot.defualt包括了所有没有被包含在具名slot中的节点。