为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽：在这个例子中，这个数据是 todo 对象：
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 我们为每个 todo 准备了一个插槽，--> <!-- 将 `todo` 对象作为一个插槽的 prop 传入。--> <slot v-bind:todo="todo"> <!-- 回退的内容 --> {{ todo.text }} </slot> </li> </ul>
现在当我们使用 <todo-list> 组件的时候，我们可以选择为待办项定义一个不一样的<template> 作为替代方案，并且可以通过 slot-scope 特性从子组件获取数据：
<todo-list v-bind:todos="todos"> <!--插槽作用域的名字是 slotProps--> <template slot-scope="slotProps"> <!-- 为指定的待办项定义一个模板--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list>
在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope 接受。也就是说你可以在支持的环境下 单文件组件或)，在这些表达式中使用 。例如：
<todo-list v-bind:todos="todos"> <template slot-scope="{ todo }"> <span v-if="todo.isComplete">✓</span> {{ todo.text }} </template> </todo-list>
这会使作用域插槽变得更干净一些。