Vue中的作用域插槽 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue中的作用域插槽</title>        
 6         
 7     </head>
 8     <body>    
 9         <div id="app">
10             <child>
11                 <template slot-scope="props">
12                     <h2>{{props.item}}</h2>
13                 </template>
14             </child>
15         </div>
16         
17         
18         <!-- 开发环境版本，包含了用帮助的命令行警告 -->
19         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
20         <script type="text/javascript">
21             Vue.component('child', {
22                 data: function() {
23                     return {
24                         list: [1,2,3,4,5]
25                     }
26                 },
27                 template:    `<div>
28                                 <ul>
29                                     <slot v-for="item of list"
30                                         :item = item>
31                                         {{item}}
32                                     </slot>
33                                 </ul>
34                             </div>`
35             })
36             var app = new Vue({
37                 el: '#app'                                
38             })
39             
40         </script>
41     </body>
42 </html>

 

posted @ 2018-05-14 15:35  铜镜123  阅读(134)  评论(0)    收藏  举报