vue作用域插槽slot-scope

一个简单的例子：

• 父组件仅仅是调用了子组件
• 子组件内部实现了一个todolist列表

整个数据传递的流程：

• 1.父组件传递了todos数组给子组件
• 2.子组件通过props接受了数组数据，这里应该没有任何问题
• 3.子组件拿到数组后v-for渲染列表，并且通过 <slot :todo="todo">的方式，把数组内的每一个todo对象，传递给父组件
• 4.父组件通过slot-scope="slotProps"的方式，接受todo对象，之后就可以通过slotProps.todo.xxx的方式来使用了

所以数据的流动经历了

• 父组件传递todos数组给子组件
• 子组件遍历todos数组，把里面的todo对象传递给父组件

源码（父组件）：

[code]<template>
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.todo.isComplete">✓</span>
<span>{{slotProps.todo.text}}</span>
</template>
</todo-list>
</template>

<script>
import todoList from './todoList'
export default {
data () {
return {
todos: [
{
id: 0,
text: 'ziwei0',
isComplete: false
},
{
text: 'ziwei1',
id: 1,
isComplete: true
},
{
text: 'ziwei2',
id: 2,
isComplete: false
},
{
text: 'ziwei3',
id: 3,
isComplete: false
}
]
}
},

components: {
todoList
},

}
</script>

子组件：

[code]<template>
<ul>
<li v-for="todo in todos" :key="todo.id">
<slot :todo="todo">
</slot>
</li>
</ul>
</template>

<script>
export default {
props: {
todos: {
type: Array
}
}
}
</script>

列表组件的循环，是发生在组件内部的，所以通过 v-for="todo in todos" ,列表组件很容易拿到每一项todo，但列表拿到数据没用呀，列表只是一个瓜皮，它又不懂业务逻辑

这个数据是你同事的业务数据，所以这个数据必须得交给组件的调用者，也就是把数据交给你的同事才对。

那么你怎样才能把每一项的todo数据给传递出去呢？

你会发现没有办法！

无论是用$emit、vuex还是localStorage，可以考虑一下，会发现没有合适的时机，能让你把todo传递出去

所以为了应对这个场景下，发明了作用域插槽，列表组件可以通过<slot :todo="todo"></slot>传递todo出去

你的同事可以通过 slot-scope="slotsProps"拿到todo。

转载form: https://segmentfault.com/a/1190000015884505