插槽

页面结构

<div id="app">
    <test></test>

    <test>
        <h1>覆盖插槽</h1>
    </test>

    <test1>
        <h1 slot="head">覆盖具名插槽head</h1>
        <h1 slot="foot">覆盖具名插槽foot</h1>
    </test1>
</div>


<template id="test">
    <div>
        <slot>公共无名插槽</slot>
    </div>
</template>

<template id="test1">
    <div>
        <slot name="head"><h1>这个是有名head插槽</h1></slot>
        <slot name="foot"><h1>这个是有名foot插槽</h1></slot> 
   </div>
</template>

逻辑结构

new Vue({
    el: '#app',
    components:{
        test:{
            template:"#test"
        },
        test1:{
            template:"#test1"
        },
    }
})