作用域插槽：可从子组件获取数据的可复用的插槽
作用域是子组件本身绑定的数据
场景：典型代表性 - 列表组件 【child 组件做列表的循环（ul），列表中的每一项如何显示并不关心，显示由外部决定，外部组件调用chlid，需要向子组件传递slot(li)，告知子组件如何显示列表的每一项】【既可以复用子组件的slot，又可以使slot内容不一致】
// child.vue
<template>
<!-- <div v-for="user in users"> ... </div> -->
<ul>
<slot v-for="user in users" :user="user" name="user"></slot>
</ul>
</template>
<script>
export default {
props: {
users: { // 也可内部data自定义
type: Array,
default () { return []}
}
}
}
</script>
// father.vue
<template>
<child :users="users">
<template slot="user" slot-scopr="slotProps">
<li>name: {{ slotProps.user.name }} & age: {{ slotProps.user.age}}</li>
</template>
</child>
</template>
<script>
export default {
data() {
return {
users: [ {name: 'tom', age: '20'}]
}
}
</script>
