什么是插槽？
在 Vue.js 中，插槽（Slot）是一种内容分发机制，它允许你在组件的模板中定义一个或多个预留位置。这些预留位置可以被父组件的内容填充，从而实现组件内部和外部内容的灵活组合。
基本概念
- 默认插槽：这是最基本的插槽类型，用于将父组件中的内容插入到子组件中。
- 具名插槽：当需要向组件中插入多个独立的内容块时，可以使用具名插槽。
- 作用域插槽：当需要传递数据给插槽内容时，可以使用作用域插槽。
默认插槽
默认插槽是最简单的一种插槽类型，它允许父组件将内容插入到子组件中。
示例代码
假设我们有一个名为 Message 的组件：
---- ----------- ---
----------
---- ----------------
-- ------- --
------
-----------
--------
------ ------- -
------ -
-------- ------
-
-
---------
------ -------
-------- -
-------- -----
------- --- ----- -----
----------------- --------
-
--------在父组件中，我们可以这样使用 Message 组件：
---- ------------------- ---
----------
-----
---------
------
----------
------
-----------
--------
------ ------- ---- ---------------
------ ------- -
----------- -
-------
-
-
---------结果
在上面的例子中，父组件的内容“这是一条消息”将被插入到 Message 组件的 <div> 标签中，最终渲染为：
---- ---------------- ------ ------
具名插槽
具名插槽允许我们在同一个组件中定义多个插槽，并且每个插槽都有一个特定的名字。
示例代码
假设我们有一个名为 Layout 的布局组件：
---- ---------- ---
----------
---- ---------------
--------
----- ---------------------
---------
------
-------------
-------
--------
----- ---------------------
---------
------
-----------
--------
------ ------- -
----- --------
-
---------
------ -------
------- -
-------- -----
--------------- -------
----------- ------
-
------- ------ -
-------- -----
----------------- --------
-
---- -
---------- --
-------- -----
-
--------在父组件中，我们可以这样使用 Layout 组件：
---- ------------------- ---
----------
-----
--------
--------- --------------
-------------
-----------
-----------------
--------- --------------
------- - --------
-----------
---------
------
-----------
--------
------ ------ ---- --------------
------ ------- -
----------- -
------
-
-
---------结果
在上面的例子中，父组件的内容被分发到了 Layout 组件的不同部分，最终渲染为：
---- ---------------
--------
-------------
---------
------
-----------------
-------
--------
------- - --------
---------
------作用域插槽
作用域插槽允许父组件访问子组件内部的数据。
示例代码
假设我们有一个名为 TodoList 的组件：
---- ------------ ---
----------
----
--- ------------- ------ -- ------ -------------
----- ------------ ----------------------
-----
-----
-----------
--------
------ ------- -
------ -
------ -
------ -
- --- -- ----- --- ----- --
- --- -- ----- ------ --
- --- -- ----- ------ -
-
-
-
-
---------在父组件中，我们可以这样使用 TodoList 组件：
---- ------------------- ---
----------
-----
--------- ---------------------------
-------- ------------------- ---------
------- ---------------------------- -----------------------------
-----------
------
-----------
--------
------ -------- ---- ----------------
------ ------- -
----------- -
--------
--
-------- -
----------------------- -
------------------------- ------
-
-
-
---------结果
在上面的例子中，父组件通过 v-slot:default="slotProps" 获取到了 TodoList 组件内部的数据，并且可以通过 slotProps 对象访问到 todo 和 index 数据，最终渲染为：
----
----
-------- -----------
------- ---------------------------- ---------------
-----
----
-----------------
------- ---------------------------- ---------------
-----
----
-----------------
------- ---------------------------- ---------------
-----
-----动态插槽名
有时候我们需要根据条件动态地改变插槽名，这时可以使用动态插槽名。
示例代码
---- ------------------- ---
----------
-----
----- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------------- --------
-
-
-
---------在这个例子中，我们通过 :name="dynamicSlotName" 动态地设置了插槽名。
结果
当 dynamicSlotName 的值为 'header' 时，插槽内容将被插入到 <slot name="header"> 中。
总结
通过这一章的学习，我们了解了 Vue3 中插槽的基本概念和使用方法。插槽使得组件之间的内容分发更加灵活和可控，是 Vue3 中非常重要的功能之一。希望你能熟练掌握并运用这些技巧来构建你的应用。