vue 通过插槽分发内容

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表单事件绑定</title>
 6     </head>
 7     <body>        
 8         <div id="app">
 9             <alert-box>
10                 Something bad happened.
11             </alert-box>
12         </div>
13         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
14         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15         <script type="text/javascript">
16             // 定义一个名为 button-counter 的新组件
17             Vue.component('alert-box', {
18               template: `
19                 <div class="demo-alert-box">
20                   <strong>Error!</strong>
21                   <slot></slot>
22                 </div>
23               `
24             })
25             new Vue({ 
26                 el: '#app'                 
27             })
28             
29             
30         </script>
31     </body>
32 </html>