作用域插槽
特点：
1. 子组件的数据来源于父组件（通过props传递）
2. 子组件无法决定自身结构
3. 子组件将数据回传给父组件（<slot :item='value'></slot>）
- 实际案例
// 父组件
<template>
<div>
<B :todos="todos">
// 通过v-slot的语法 将插槽的值赋值给scopeData
// 由于子组件没有给slot命名，默认值就为default
// 如果是具名插槽 使用：v-slot:name="scoprData"
<template v-slot:default="scopeData">
<span>{{ scopeData.todo }}</span>
</template>
</B>
</div>
</template>
import B from './B.vue' // 子组件
export default {
name: 'A',
components: {B}
data() {
return {
todos: [
{name: '张三', age: 18}，
{name: '李四', age: 20}}
]
}
}
}
// 子组件
<template>
<div>
<ul>
<li v-for="(item, index) in todos" >
<slot :todo="item"></slot> // 子组件回传数据给父组件
</li>
</ul>
</div>
</template>
export default {
name: 'B',
props: ['todos']
}
