我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。Slots 可用于将Html内容从父组件传递到子组件进行显示。例如，你创建一个名为 Button 的组件，并且只想更改按钮上显示的文本，可以通过从父组件的 Slot 传递文本到子组件中更改子组件中按钮显示的文本。

  本文将介绍 Slots使用，希望阅读本文后你能更好的理解Slots、Named Slots、使用数据属性的 Scoped Slots 和使用方法的 Scoped Slots这些基本概念。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目 第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目 第一章 Vue3项目创建 3 Vite 创建 vue项目 第二章 Vue3 基础语法指令 第三章 Vue Router路由器的使用 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign) 第四章 VUE常用 UI 库 2 ( ailwind 后台框架) 第五章 Vue 组件应用 1( Props ) 第五章 Vue 组件应用 2 ( Emit ) 第五章 Vue 组件应用 3( Slots ) 第五章 Vue 组件应用 4 ( provide 和 inject ) 第五章 Vue 组件应用 5 (Vue 插件) 第六章 Pinia,Vuex与axios,VueUse 1（Pinia） 第六章 Pinia,Vuex与axios,VueUse 2(Vuex) 第六章 Pinia,Vuex与axios,VueUse 3（VueUse） 第六章 Pinia,Vuex与axios,VueUse 4（axios） 第七章 TypeScript 上 第七章 TypeScript 中 第七章 TypeScript 下 创建Trello 任务管理器 第八章 ESLint 与 测试 ( ESLint ) 第八章 ESLint 与 测试 ( Jest ) 第八章 ESLint 与 测试 (TypeScript 中Jest与检测环境集成)

  让我们运行一个简单的例子，方便大家体会一下 Slot 是如何使用的。首先在项目目录下的src\components目录下创建一个子组件User.vue。将 标记放在要插入从父组件接收的内容的位置。

  在父组件App.vue中，导入创建好的User.vue，在用户组件()之间写入要插入的内容。

  父组件使用 v-slot:default 接收数据，定义了slotProps参数为子组件中数据对象的引用。

浏览器中看到部门信息，说明父组件使用了子组件数据对象的users中的dept属性，替换了子组件slot标签中的值。

子组件User中定义的slotProps引用名称开发者可以自由定义。

  App.vue文件中的{{slotProps.user.dept}} 内容修改为slotProps，我们在浏览器中能看到User.vue文件中users数据内容。

浏览器中显示来自子组件的数据。

  我们通过上面的代码确认了 slotProps引用包含完整的users对象，因此可以从父组件到users对象中的所有属性值。

{{slotProps.user.name}}

{{slotProps.user.dept}}

3 多个数据绑定

  可以使用**({ })**写法来简化上面例子中v-slot:default="slotProps"引用对象写法。在开发中一般不会用引用的写法来写代码，这样的写法不够简洁同时也不灵活。我们会直接在User组件中绑定子组件中的slot绑定名称，这种简单风格的写法。

  这样做的好处是可以很方便的用代码表达，让父组件同时绑定多个子组件中的slot中的数据对象。

  在user.vue文件中我们在定义一个数据对象msg将它绑定给slot，这个时候slot同时绑定二个数据对象user与msg。

在App.vue文件中使用 v-slot:default=”{ user,msg}”，写法我们可以获得接收到子组件绑定的二个数据对象。

浏览中显示的结果是。

到目前为止，我们知道要将子组件的数据属性传递给父组件时，我们会使用作用域slot了。

  到目前为止，我们一直在使用 Scoped Slots 仅将子组件的数据属性传递给父组件。Scoped slots 可以传递方法（函数）和数据属性。

  创建一个组件 Menu.vue 文件，该文件在单击按钮时在显示/隐藏之间切换列表。通过给按钮设置点击事件，点击按钮，data属性显示会在true和false之间切换，v-if会在显示和不显示之间切换。

在App.vue中列表内容使用父组件Menu传递到Menu.vue文件中的slot。

浏览器中显示的结果如下。

在页面中点击列表按钮，下面的列表会隐藏起来。

  上面的单击隐藏列表功能是在子组件中设置了按钮和事件，通过事件来控制display参数实现切换列表显示和不显示的。接下来，我们将使用 Scoped Slot 对其进行更改，使其可以从“父组件”显示或隐藏。

  去掉 Menu.vue 文件中的 button 标签，添加一个 slot 标签。将 name 属性设置为 slot 标签并将其值设置为 activator。此外**，在 slot 标签中，使用 v-bind 指定 on 方法。**

  在App.vue中，添加一个template标签，并在v-slot中指定Menu中添加的slot的activator。添加按钮标签并设置点击事件。在 Button 的点击事件上执行的方法是通过 Scoped Slot 传递的Menu.vue中的 onFind 方法。

外观与之前相同，但您可以使用父组件中设置的按钮来切换列表的显示/隐藏。

更改为父组件的按钮

事实证明，您可以传递方法和数据属性。

  要查看更多使用 Scoped Slots 的方法，我们将了解如何使用简单代码自定义表格。

  创建一个可重用的子组件 Table.vue。从父组件接收包含 headers 和 items 信息的 props 数组，并将其显示为表格。

  在父组件中，写入传递给子组件的标头和用户。通常，用户是使用axios从服务器等外部资源获取的。

当您使用浏览器查看时，将显示用户列表

显示用户列表

如果这里有要求将 FIRSTNAME 和 LASTNAME 显示为 NAME，你会如何处理？

可以直接重写Table.vue来处理，但是如果这个Table.vue也用在了其他组件中，会影响表格的显示。

在此处使用 Scoped Slots。

在 Table.vue 端添加一个 slot 标签，并用 v-bind 指定项目。将 td 标记保留为插槽标记内的默认值。

在父端，我们使用 v-slots 从子组件接收项目。在模板标签中展开接收到的项目。

如果用浏览器查看，父端描述的表信息将使用 Slot 显示。

使用 Slot 显示表格

如果不需要更改任何内容，移除父模板标签并恢复表头，表格将以子组件的 Slot 标签中描述的默认设置显示。

我能够通过更改父组件中 Slot 传递的内容来创建可自定义的表格组件。您可能会惊讶地发现 Slots 也可以以这种方式使用。

  在代码结构中使用 useSlots来获取有关插槽（slot）的对象引用，在useSlots引用中获得其中的属性值。

在 App.vue 文件中设置 Slot 中值。

  可以在 slots.default()[0].children 中看到默认的 Slot 值。如果想获得属性值slots.title()[0].children直接使用属性名称为方法名称，会获得一个数组，在数组的第一位置中的children 属性值就是slots中的参数值。如果有多个参数就按数组的顺序获得内容。如果你不在App.vue的父组件的Slot中放任何东西，useSlots()将是一个空对象{}。

通过上面的介绍，相信你能对 Slots 有了更深的理解。特别是在代码开发中如果你有 Scoped Slot 机会，请正确的使用它。