vue作用域插槽例子

前端小白捣腾了半天，官网的例子很精简但是对新手不友好啊，命名看的我云里雾里，自己简单改了一下
1.App.vue
<template>
<div>
<child :propName="items">
<!--作用域插槽也可以具名！-->
<li
slot="slotName"
slot-scope="scopeName">
{{scopeName.dos}}
</li>
</child>
</div>
</template>
<script>
import child from "./components/child.vue"
export default{
components:{child},
data(){
return{
items:[
{do:'play'},
{do:'eat'},
{do:'sleep'},
{do:'play'},
{do:'eat'},
{do:'sleep'}
]
}
}
}
</script>2.child.vue
<template>
<ul>
<slot name="slotName"
v-for="item in propName"
:dos="item.do"></slot>
</ul>
</template>
<script>
export default{
props:['propName']
}
</script>接着向下一章进发吧