1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>slot,具名插槽</title> 6 <div id="app"> 7 <child> 8 <div slot="header">header</div> 9 </child> 10 </div> 11 </head> 12 <body> 13 <!-- 开发环境版本，包含了用帮助的命令行警告 --> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script type="text/javascript"> 16 Vue.component('child', { 17 template: `<div> 18 <slot name="header"></slot> 19 <div>content</div> 20 <slot name="footer"> 21 <div >footer</div> 22 </slot> 23 </div>` 24 }) 25 var app = new Vue({ 26 el: '#app', 27 data: { 28 } 29 }) 30 31 </script> 32 </body> 33 </html>