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 指令来将数据传递给子组件：
------------- -------- ----- ------ ---- -- ---
--------- --------------------------
---------- -- ------------------- --------
-----------
---------------这里的 v-slot:header="slotProps" 是 vue 2.6.x 引入的语法糖，简写为 #header="slotProps"，是定义一个具名插槽，也可以简写为 v-slot="defaultSlotProps"，则为默认插槽。
实现组件复用
在组件复用方面，scoped slot 主要有两种应用场景：
- 对组件（尤其是一些基础组件）进行扩展，以支持更多的功能；
- 对组件的样式进行定制，以满足不同需求的 UI 设计。
扩展组件功能
组件扩展是使用 scoped slot 最常见的应用场景之一。例如，我们可以通过 scoped slot 来为一个按钮组件添加自定义的图标。
首先，我们在子组件 Button 内部声明一个具名插槽，用于接收父组件传递进来的图标：
----------
------- -------------------
----- -------------------
----- -------------
-------------
-------
---------
-----------
--------
------ ------- -
------ ---------
--------- -
----------- -
------ -
---------
--------- -- --------------------------
-
-
-
-
---------然后，在父组件中使用 v-bind 指令将图标数据传递给子组件，同时使用具名插槽来填充图标内容：
---------- -----------
--------- ------------
-- ----------------------
-----------
--- ----
------------这样，我们就通过 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