<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet"  type="text/css" href="index.css"/>
        <script src="vue.js"></script>
    </head>
    <body>
        <div>
        <h1>--具名插槽--</h1>
        <div id="example4">
            <base-layout>
                <template v-slot:header>
                    This is header.
                </template>
                <template>
                    This is main.
                </template>
　　　　　　　　　<!--#键+插槽名称是缩写，如下-->
                <template #footer>
                    This is footer.
                </template>
            </base-layout>
        </div>
        <script>
        Vue.component('base-layout', {
            template: '\
                <div>\
                    <header style="font-size:20px">\
                        <slot name="header"></slot>\
                    </header>\
                    <main style="font-size:12px">\
                        <slot></slot>\
                    </main>\
                    <footer style="font-size:8px">\
                        <slot name="footer"></slot>\
                    </footer>\
                </div>\
            '
        })
        var example4 = new Vue({
            el:'#example4'
        })
        </script>
        </div>
    </body>
</html>

运行效果图：