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