<!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="example7">
            <base-layout-two>
                <template v-slot:[dynamicslotname]>
                    This is Me.
                </template>
            </base-layout-two>
        </div>
        <script>
        Vue.component('base-layout-two', {
            template: '\
                <div>\
                    <header style="font-size:20px">\
                        <slot name="header"></slot>\
                    </header>\
                </div>\
            '
        })
        var example7 = new Vue({
            el:'#example7',
            data: {
                dynamicslotname : 'header'
            }
        })
        </script>
        </div>        
    </body>
</html>

 

运行效果图：