<!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>
运行效果图: