vue 插槽 slot 

 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>

 

posted @ 2018-05-14 13:57  铜镜123  阅读(124)  评论(0)    收藏  举报