1. 什么是 slot-scope？
slot-scope 是 Vue 2 中用于作用域插槽的语法。它的作用是让子组件可以把一些数据传递给父组件，父组件可以根据这些数据自定义渲染内容。
简单来说：
-
子组件：负责提供数据。
-
父组件：负责根据数据渲染内容。
2. 为什么需要 slot-scope？
想象一个场景：
-
你封装了一个列表组件（子组件），这个组件会接收一个数组（比如
todos），并用v-for循环渲染每一项。 -
但是，列表组件并不知道每一项数据应该如何渲染，因为渲染逻辑可能因业务需求不同而变化。
-
这时，你需要把每一项数据（比如
todo）传递给父组件，让父组件决定如何渲染。
这就是 slot-scope 的作用：子组件提供数据，父组件决定如何渲染。
3. 结合代码理解
子组件（todoList.vue）
<template>
<ul>
<li v-for="todo in todos" :key="todo.id">
<!-- 通过 slot 把 todo 数据传递给父组件 -->
<slot :todo="todo"></slot>
</li>
</ul>
</template>
<script>
export default {
props: {
todos: {
type: Array,
required: true,
},
},
};
</script>-
子组件接收一个
todos数组，并通过v-for循环渲染每一项。 -
在循环中，子组件通过
<slot :todo="todo"></slot>把每一项todo数据传递给父组件。
父组件（App.vue）
<template>
<todo-list :todos="todos">
<!-- 通过 slot-scope 接收子组件传递的 todo 数据 -->
<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 },
{ id: 1, text: "ziwei1", isComplete: true },
{ id: 2, text: "ziwei2", isComplete: false },
{ id: 3, text: "ziwei3", isComplete: false },
],
};
},
components: {
todoList,
},
};
</script>-
父组件通过
:todos="todos"把todos数组传递给子组件。 -
子组件通过
slot把每一项todo数据传递回来。 -
父组件通过
slot-scope="slotProps"接收todo数据，并根据todo.isComplete和todo.text自定义渲染内容。
4. 数据流动
-
父组件 把
todos数组传递给 子组件。 -
子组件 通过
v-for循环todos，并把每一项todo数据通过slot传递回 父组件。 -
父组件 通过
slot-scope接收todo数据，并决定如何渲染。
5. 为什么不用 $emit 或 vuex？
-
$emit：$emit是用来触发事件的，适合在某个特定时机（比如点击按钮）传递数据。但在列表渲染的场景中，v-for循环的每一项都需要传递数据，$emit无法满足这种需求。 -
vuex：vuex是全局状态管理工具，适合跨组件共享数据。但在这种父子组件通信的场景中，使用vuex会显得过于复杂，没有必要。
slot-scope 是专门为这种场景设计的：子组件提供数据，父组件决定如何渲染。
6. 实际应用场景
-
表格组件：比如 Element UI 的
el-table，表格的每一行数据需要传递给父组件，父组件可以自定义每一行的渲染方式。 -
列表组件：比如封装一个通用的列表组件，父组件可以根据每一项数据自定义渲染内容。
-
表单组件：比如封装一个表单组件，父组件可以根据每一项表单字段的数据自定义渲染方式。
7. 总结
-
slot-scope的作用：让子组件可以把数据传递给父组件，父组件可以根据数据自定义渲染内容。 -
使用场景：当子组件需要渲染一些数据，但父组件需要控制具体的渲染方式时。
-
优点：灵活、解耦、复用性强。
8. Vue 3 中的替代方案
在 Vue 3 中，slot-scope 被废弃，改为使用 v-slot 语法。例如：
<template v-slot:default="slotProps">
<span v-if="slotProps.todo.isComplete">✓</span>
<span>{{ slotProps.todo.text }}</span>
</template>或者简写形式：
<template #default="{ todo }">
<span v-if="todo.isComplete">✓</span>
<span>{{ todo.text }}</span>
</template>
