## 作用域插槽 ``` <div id="app"> <child> <template slot-scope="props"> //template是固定写法,父组件调用子组件的时候传递了一个插槽,这个叫作用域插槽 <h1>{{props.item}} -- hello</h1> </template> </child> </div> <script> Vue.component('child', { data: function () { return { list: [1, 2, 3, 4], }; }, template: ` <div> <ul> <slot v-for="item of list" :item=item ></slot> </ul> </div> `, }); new Vue({ el: '#app', }); </script> ```