vue3中slot（插槽）的详细使用

在 Vue 3 中，slot（插槽）是一种强大的组件内容分发机制，它允许父组件向子组件传递内容，从而使组件的使用更加灵活。以下是关于 Vue 3 中 slot 的详细介绍

一、默认插槽

• 这是最基本的插槽形式。子组件中使用定义一个插槽，父组件可以将内容放置在子组件标签对之间来填充这个插槽。
  子组件代码示例 childTest.vue
  父组件代码示例parentTest.vue
  父组件中的

  标签内容就会被插入到子组件的默认插槽位置，即子组件

  内的位置

二、具名插槽

• 当子组件需要定义多个插槽时，就可以使用具名插槽来区分这些插槽。
• 在子组件中，给标签添加name属性来指定插槽的名称。父组件则通过v-slot:slotName或者简写#slotName来指定内容应该放置到哪个具名插槽

子组件代码示例 childTest.vue

父组件代码 parentTest.vue

父组件通过v-slot:header、#content（简写形式）和v-slot:footer将不同的内容分别放入子组件的header、content和footer具名插槽中

三、作用域插槽

• 作用域插槽允许子组件向父组件传递数据，父组件可以基于这些数据来渲染内容。
• 在子组件中，通过在标签上使用v-bind（或简写:）将数据传递给插槽。父组件在使用作用域插槽时，可以通过模板内的slotProps对象来访问子组件传递的数据。

子组件代码

父组件

子组件通过将itemData数据传递给名为item的作用域插槽。父组件通过v-slot:item="slotProps"接收这个数据，并在模板中使用slotProps.item来访问和渲染这些数据

四、动态插槽

• 动态插槽允许你根据条件动态地选择要渲染的插槽。这可以通过 v-bind 动态绑定插槽名来实现
  子组件 childTest.vue

父组件 childTest.vue

父组件通过v-slot:[dynamicSlotName]、#[dynamicSlotName]（简写形式）

五、条件插槽

• 使用 $slots 属性与 v-if 来实现。
• 我们定义了一个卡片组件，它拥有三个条件插槽：header、footer 和 default。 当 header、footer 或 default 的内容存在时，我们希望包装它以提供额外的样式
  父组件 parentTest.vue

子组件 childTest.vue

在 Vue 3 中，你可以使用 v-slots 指令来以对象的形式定义插槽内容。这种方式允许你在模板中以更灵活的方式定义多个插槽。以下是一个示例，展示如何使用 v-slots 来定义默认插槽和其他插槽的内容。

父组件代码

子组件代码（childTest.vue）