在使用 Vue.js 进行组件化开发时，为了增加代码的复用性和可读性，我们会经常利用组件的 slot 功能进行内容分发。下面将详细介绍 Vue.js 的 slot 功能，包括基本使用、带名称的 slot 以及作用域 slot，并提供示例代码。
基本使用
Vue.js 的 slot 功能是一种分发内容的机制，可以将组件中的内容分发到指定的位置。在组件中使用 slot，需要在组件的模板中使用 <slot> 标签，并在组件的调用中传递需要分发的内容。例如：
<template>
<div>
<h2>组件标题</h2>
<slot></slot>
</div>
</template>在上面的例子中，<slot> 标签表示组件的插槽，它的作用是将组件中的内容分发到这个位置。
调用该组件时，可以在组件的标签中添加任意的内容，这些内容都会被分发到组件中的 <slot> 标签所在的位置。例如：
<template>
<div>
<my-component>
<p>这是组件中的内容</p>
</my-component>
</div>
</template>上面的代码中，<my-component> 组件中的内容 <p>这是组件中的内容</p> 将会被分发到组件模板中的 <slot> 标签所在的位置。
带名称的 slot
除了基本用法外，Vue.js 还支持带名称的 slot，它允许我们在组件中定义多个插槽，以更加灵活地分发内容。使用带名称的 slot 必须在 <slot> 标签上添加一个 name 属性。例如：
<template>
<div>
<h2>组件标题</h2>
<slot name="header"></slot>
<div>组件中的内容</div>
<slot name="footer"></slot>
</div>
</template>在上面的例子中，<slot> 标签上分别添加了 name="header" 和 name="footer" 属性，表示该插槽有自己的名称。
调用带名称的插槽需要在组件标签中使用 <template> 标签，并在标签中的 v-slot 或 # 属性中指定对应的插槽名称。例如：
-- -------------------- ---- -------
----------
-----
--------------
--------- --------------
------------------
-----------
---------------
--------- --------------
------------------
-----------
---------------
------
-----------在上面的调用示例中，<template> 标签中的 v-slot:header 属性表示将模板中的内容分发到组件中 name="header" 的插槽中。
作用域 slot
作用域 slot 是 Vue.js 提供的一种高级 slot，它允许我们在组件中定义具有作用域的插槽。使用作用域 slot，可以方便地将组件的数据传递到插槽中。使用作用域 slot 需要在 <slot> 标签上添加一个 v-bind="xxx" 属性，其中 xxx 表示需要传递到插槽中的数据名称。例如：
-- -------------------- ---- -------
----------
-----
-------------
----
--- ------------- ------ -- ----- -------------
----- ------------------ ----------------------------
-----
-----
------
-----------在上面的例子中，组件使用了一个 v-for 循环来渲染一个列表，同时使用了作用域 slot，将循环中的每一项传递到了插槽中。
调用作用域 slot 同样需要使用 <template> 标签，在标签中使用 v-slot 或 # 属性，同时用 中括号 包裹上面定义的数据名称。例如：
-- -------------------- ---- -------
----------
-----
--------------
--------- -------------- ----- ----- ---
------ ----- - - ----- ---- -------
-----------
---------------
------
-----------在上面的调用示例中，v-slot:item="{ item, index }" 表示将组件中传递过来的 item 和 index 数据解构赋值到模板中。
总结一下，Vue.js 的 slot 功能是一种非常重要的组件化开发机制，能够极大地提高代码的复用性和可读性。在使用 slot 时，我们需要注意一些基本使用、带名称的 slot 以及作用域 slot 等方面的特性，以便能够更加灵活地分发内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649567be48841e9894298938