1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>插槽基本用法</title> 9 </head> 10 11 <body> 12 <div id="app"> 13 <alert-box></alert-box> 14 <alert-box>有bug发生</alert-box> 15 <alert-box>有一个警告</alert-box> 16 </div> 17 </body> 18 <script src="../js/vue.js"></script> 19 <script> 20 //组件插槽:父组件向子组件传递内容 21 Vue.component('alert-box', { 22 template: ` 23 <div> 24 <strong>ERROR:</strong> 25 <slot>默认内容</slot> 26 </div> 27 ` 28 }); 29 var vm = new Vue({ 30 el: "#app", 31 data: { 32 33 } 34 }); 35 </script> 36 37 </html>