Vue-插槽

1 什么是插槽

插槽是Vue中一种非常强大的功能，插槽允许子组件在其模板中预留出一些可变的内容区域，这些内容区域可以在组件被使用的时候动态的传入内容。

2 默认插槽

在子组件中使用<slot>标签定义一个插槽，从而预留出一个可变的内容区域。

 在父组件中引入子组件时，将需要放入插槽的元素标签写在子组件标签内。

 最终效果图

 注意：由于放入插槽中的元素标签是写在父组件之中的，所以可以在这些元素标签中使用父组件当中的数据。

3 具名插槽

如果使用多个slot元素标签，就会出现一个问题：怎样把元素标签插入到指定的slot插槽中，这个时候就需要运用到具名插槽，为插槽设置一个name属性，而默认插槽也有一个默认的名字default

如图，在子标签中设置了三个slot标签，其中第二个slot没有name属性即默认插槽。

 

在父组件中引入子组件时，可以使用template元素来向指定的插槽提供内容，其中要使用v-slot:指令，也可以简写为#，通过这个方法可以将template元素中的内容提供给指定的插槽 

 最终效果

 

4 作用域插槽

前面曾提到过，使用插槽的时候，是可以使用父组件的数据的，但是对于子组件的状态，插槽是无法访问到的，然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。这就是作用域插槽

 

在字标签中的slot元素上可以通过v-slot:插槽名="变量名"或者如图的格式来绑定子组件中的变量。

 

  在父组件中的template元素中通过#插槽名="接受数据名"的格式来接受子组件中的数据，从而实现在父组件中使用子组件的数据。

 效果图

 五 总结

Vue.js中的插槽（Slot）允许你在父组件中将子组件的内容插入到预定义的“插槽”位置。插槽在构建可重用组件和布局时非常有用，它提供了灵活的组件化方式。

1. **普通插槽**：
   - 普通插槽是最基本的插槽类型，它允许你将任意内容插入到组件中。
   - 在子组件中，使用 `<slot>` 元素来定义普通插槽的位置。
   - 在父组件中使用子组件时，你可以在父组件的模板中放置内容，这些内容将会被插入到子组件的普通插槽位置。

2. **具名插槽**：
   - 当需要在同一个组件中使用多个插槽时，可以使用具名插槽。
   - 在子组件中，使用 `<slot>` 元素的 `name` 属性来定义具名插槽。
   - 在父组件中，使用 `<template v-slot:name>` 或 `<template #name>` 来分配内容给具名插槽。

3. **作用域插槽（Scoped Slots）**：
   - 作用域插槽允许子组件向父组件传递数据。
   - 在子组件中，使用 `<slot>` 元素的 `name` 属性来定义作用域插槽，并通过 `v-bind` 把数据传递给插槽。
   - 在父组件中，使用带参数的插槽语法来接收传递的数据。

通过使用这些插槽类型，可以在Vue中实现更灵活、可复用的组件，从而更好地组织和管理应用程序的UI。