Vue.js 的 scoped slot 是用于组件复用的强大工具。它允许父组件定义一个插槽，内部子组件可以将其内容填充进来，并且在子组件内部可以自由地使用这些数据。这可以使我们在编写可复用组件时更加灵活，同时能够提升代码的可读性和维护性。
scoped slot 是什么？
scoped slot 是 Vue.js 2.1.0 版本中引入的一个新特性，其可通过 slot-scope 属性来定义，用于解决插槽作用域的问题。
在 Vue.js 中，我们通常可以通过 props 属性来将数据从父组件传递到子组件中，然后在子组件中通过 this.$emit() 方法将数据传递回父组件。但这种数据传递方式相对单向，且在父组件中编写的插槽中无法访问子组件的数据。
而 scoped slot 则允许我们在子组件中创建一个插槽，并且在插槽内部显式地声明数据的作用域，使得父组件可以访问到子组件的数据。
如何使用 scoped slot？
在子组件中定义插槽时，需要通过 slot-scope 属性来声明插槽内部数据的作用域：
-- -------------------- ---- ------- ---------- ----- ----- ------------- ------------------- ---- ------ --- ------- ------ ----------- -------- ------ ------- - ------ -------- - ---------展开代码
在父组件中使用 scoped slot 时，需要在插槽标签内部使用 v-bind 指令来将数据传递给子组件：
<my-component :user="{ name: 'Tom', age: 18 }"> <template v-slot:header="slotProps"> <h1>Hello, {{ slotProps.user.name }}!</h1> </template> </my-component>
这里的 v-slot:header="slotProps" 是 vue 2.6.x 引入的语法糖，简写为 #header="slotProps"，是定义一个具名插槽，也可以简写为 v-slot="defaultSlotProps"，则为默认插槽。
实现组件复用
在组件复用方面，scoped slot 主要有两种应用场景：
- 对组件（尤其是一些基础组件）进行扩展，以支持更多的功能；
- 对组件的样式进行定制，以满足不同需求的 UI 设计。
扩展组件功能
组件扩展是使用 scoped slot 最常见的应用场景之一。例如，我们可以通过 scoped slot 来为一个按钮组件添加自定义的图标。
首先，我们在子组件 Button 内部声明一个具名插槽，用于接收父组件传递进来的图标：
-- -------------------- ---- ------- ---------- ------- ------------------- ----- ------------------- ----- ------------- ------------- ------- --------- ----------- -------- ------ ------- - ------ --------- --------- - ----------- - ------ - --------- --------- -- -------------------------- - - - - ---------展开代码
然后，在父组件中使用 v-bind 指令将图标数据传递给子组件，同时使用具名插槽来填充图标内容：
<my-button icon="add"> <template v-slot:icon> <i class="icon-plus"></i> </template> Add Item </my-button>
这样，我们就通过 Scoped Slot 实现了基础组件 Button 的扩展，实现了 Add Item 按钮的功能，并在其中添加了一个 "+ " 图标。
定制样式
另一个常见的用例是使用 Scoped Slot 来定制组件样式。例如，我们有一个输入框组件 TextInput，我们希望用户可以自定义该组件内部的一些样式，例如输入框的背景色、边框颜色等等。
为了实现这一目标，我们需要在 TextInput 中定义一个插槽来接收父组件定义的样式，并将其应用在正确的位置：
-- -------------------- ---- ------- ---------- ---- ------------------- ------ ----------- --------- ------------------- ----------------------- --------------- ------------------ -- -- ----- ------------- -- ----- -- ----- ------------- -- ------ ----------- -------- ------ ------- - ------ - ------- ------ - - ---------展开代码
在上面的代码中，我们定义了一个名为 styles 的 props，用于接收父组件传递进来的一些自定义样式。接着，在模板中我们使用了 :style 来绑定样式属性，使得父组件传递进来的样式可以直接应用于该组件。
而在父组件中，我们使用 Scoped Slot 来定义该组件的样式，例如：
-- -------------------- ---- ------- ---------- ----------- ---------------------- --------- -------------- ----- --------- ------ ----------------- ----------- ----------- ------------- ----------- -------- ------ ------- - ------ - ------ - ------------ - ---------------- ------- ------------ ------- ------ ------ - - - - ---------展开代码
这里我们定义了一个名为 inputStyles 的对象，其中包含了各种自定义样式的属性。同时，我们使用 Scoped Slot 来定义了 input 组件内部的前缀样式，即通过 slot-scope 将 inputStyles 对象传递给子组件，并在前缀中使用了该样式。
总结
Scoped Slot 是一种强大的 Vue.js 特性，可以帮助我们更加灵活地复用组件，并且在样式定制方面也有很好的应用。虽然这一特性相对较新，但它已经被广泛应用于各种场景中，并且正在成为 Vue.js 生态系统中的一种重要工具。
参考代码
-- -------------------- ---- ------- ---- ---------- --- ---------- ------- ------------------- ----- ------------------- ----- ------------- ------------- ------- --------- ----------- -------- ------ ------- - ------ --------- --------- - ----------- - ------ - --------- --------- -- -------------------------- - - - - ---------展开代码
-- -------------------- ---- ------- ---- ------- --- ---------- ----- ---------- ----------- --------- ------------ -- ---------------------- ----------- --- ---- ------------ ---- ----------- ---------------------- --------- -------------- ----- --------- ------ ----------------- ----------- ----------- ------------- ------ ----------- -------- ------ -------- ---- -------------- ------ --------- ---- ------------------ ------ ------- - ----------- - --------- --------- -- ------ - ------ - ------------ - ---------------- ------- ------------ ------- ------ ------ - - - - ---------展开代码
-- -------------------- ---- ------- ---- -------------- --- ---------- ---- ------------------- ------ ----------- --------- ------------------- ----------------------- --------------- ------------------ -- -- ----- ------------- -- ----- -- ----- ------------- -- ------ ----------- -------- ------ ------- - ------ - ------- ------ - - ---------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518d49f95b1f8cacd118258
