vuejs作用域插槽

作用域插槽

<div id='root'>
　　<child>
　　　　<template slot-scope='props'>
　　　　　　<h1>{{props.item}}</h1>
　　　　</template>
　　</child>
</div>

<script>
Vue.component('child',{
　　data:function(){
　　　　return {
　　　　　　list:[1,2,3,4,5]
　　　　}
　　},
　　template:`<div>
　　　　<slot v-for='item of list' :item=item></slot>
　　</div>`
})
var vm = new Vue({
　　　el:'#root'
})
</script>

作用域插槽必须是template开头和结尾的一个内容,slot-scope是声明要接收的子组件参数都放在哪，放在props里面

所以当子组件做循环，她的某一部分dom结构应该由外部传递进来的时候，使用作用域插槽，使用作用域插槽，子组件可以像父组件插槽传递数据