slot 插槽的做用域用法(摘自vue.js 官网)

有的时候你但愿提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 <todo-list> 组件的模板可能包含了以下代码：

<ul> <li v-for="todo in todos" v-bind:key="todo.id" > {{ todo.text }} </li> </ul>

可是在咱们应用的某些部分，咱们但愿每一个独立的待办项渲染出和 todo.text 不太同样的东西。这也是做用域插槽的用武之地。

为了让这个特性成为可能，你须要作的所有事情就是将待办项内容包裹在一个 <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"> <!-- 为待办项自定义一个模板，--> <!-- 经过 `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 接受。也就是说你能够在支持的环境下 (单文件组件或现代浏览器)，在这些表达式中使用 ES2015 解构语法。例如：

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

这会使做用域插槽变得更干净一些。