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>