作用域插槽
特點(diǎn)：
1. 子組件的數(shù)據(jù)來源于父組件（通過props傳遞）
2. 子組件無法決定自身結(jié)構(gòu)
3. 子組件將數(shù)據(jù)回傳給父組件（<slot :item='value'></slot>）
- 實(shí)際案例
// 父組件
<template>
<div>
<B :todos="todos">
// 通過v-slot的語法 將插槽的值賦值給scopeData
// 由于子組件沒有給slot命名熟丸，默認(rèn)值就為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> // 子組件回傳數(shù)據(jù)給父組件
</li>
</ul>
</div>
</template>
export default {
name: 'B',
props: ['todos']
}
