详解vue中的插槽

前言

插槽通俗讲就是：子组件预留一个坑位，父组件后期来填坑。插槽允许你在父组件中传递内容到子组件中的特定位置，这样你可以在子组件中定义一些可定制的区域。在Vue 3中，插槽有两种类型：默认插槽和具名插槽。

PS：如果插槽没有放元素，则显示默认内容。如果放了内容，插槽原先的内容会被忽略掉

默认插槽

默认插槽是没有具体名称的插槽，用于传递任意内容。在父组件中，你可以使用子组件的标签内放置内容，这些内容将被传递到子组件的默认插槽中。

Slot.vue

<!-- Slot.vue -->
<template>
  <div>
    <h2>Slot Example</h2>
    <slot>
      <!-- 默认插槽的内容 -->
      vue
    </slot>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

在 Slot.vue 中，我们定义了一个组件，其中包含一个 <slot>，这是一个默认插槽。如果没有在组件标签中提供内容，则默认会显示 "vue"。

App.vue

<!-- App.vue -->
<template>
  <div>
    <Slot />

    <Slot>
      <!-- 在这里放置默认插槽的内容 -->
      <button>A Button</button>
    </Slot>
  </div>
</template>

<script>
import Slot from './components/Slot.vue';

export default {
  components: {
    Slot,
  },
}
</script>

<style scoped>
</style>

在 App.vue 中，我们使用了 Slot 组件，并在其中放置了两个 <Slot> 标签。这两个标签包含了默认插槽的内容。由于默认插槽是匿名的，所以在组件中的 <slot> 中的内容会被替换为父组件中相应 <Slot> 标签内的内容。

效果：上面的父组件没填坑，就会显示子组件里默认的内容，下面的父组件放了一个按钮，则插槽内容显示自定义的button

具名插槽

具名插槽是通过名称来传递内容的插槽。在子组件中，你可以使用 <slot> 元素的 name 属性为插槽命名，并在父组件中使用 <template> 的 v-slot 指令来指定要传递的内容。用法：<template v-slot=xxx> or <template #xxx>

Slot.vue

<!-- Slot.vue -->
<template>
  <div>
    <h2>Slot案例：</h2>
    
    <!-- 默认插槽，命名为 "default" -->
    <slot name="default">
      我是默认的slot
    </slot>
    
    <!-- 具名插槽，命名为 "center" -->
    <slot name="center">
      我是默认的Center
    </slot>
    
    <!-- 具名插槽，命名为 "right" -->
    <slot name="right">
      我是默认的Right
    </slot>
  </div>
</template>

在 Slot.vue 中，我们定义了一个组件 SlotName，该组件包含了三个插槽：一个默认插槽（命名为 "default"）和两个具名插槽（"center" 和 "right"）。

App.vue

<!-- App.vue -->
<template>
  <div>
    <!-- 使用 SlotName 组件 -->
    <SlotName>
      
      <!-- 在默认插槽位置放置内容 -->
      <template #default>
        <h3>default</h3>
      </template>
      
      <!-- 在具名插槽 "center" 位置放置内容 -->
      <template v-slot:center>
        <h3>center</h3>
      </template>
      
      <!-- 在具名插槽 "right" 位置放置内容 -->
      <template #right>
        <h3>right</h3>
      </template>
      
    </SlotName>
  </div>
</template>

<script>
import SlotName from './components/Slot.vue';

export default {
  components: {
    SlotName,
  },
}
</script>

<style lang="less" scoped>
/* 这里可以添加样式 */
</style>

在 App.vue 中，我们使用了 SlotName 组件，并在组件标签内部使用了三个具名插槽。每个插槽位置都包含了一个 <h3> 元素，分别用于展示在 "default"、"center" 和 "right" 插槽位置的内容。

效果：

总结

在vue中有着默认插槽以及具名插槽，以下是关于它们的总结：

1. 默认插槽：

   • 默认插槽是没有具体名称的插槽，用于传递任意内容。
   • 在父组件中，通过在子组件标签内放置内容，这些内容会被传递到子组件的默认插槽中。
   • 在子组件中，使用 <slot></slot> 表示默认插槽的位置。

2. 具名插槽：

   • 具名插槽是通过名称来传递内容的插槽，用于更灵活地指定内容的位置。
   • 在子组件中，使用 <slot name="yourSlotName"></slot> 表示具名插槽的位置。
   • 在父组件中，使用 <template v-slot:yourSlotName> 或简写为 <template #yourSlotName> 来指定要传递到具名插槽中的内容。

3. 父组件向子组件传递内容：

   • 在父组件中使用子组件标签内的内容，或使用 <template> 的 v-slot 指令来指定内容传递到对应的插槽中。
   • 插槽中的内容将替换子组件中相应插槽位置的内容。

4. 子组件中的插槽位置：

   • 在子组件中，使用 <slot></slot> 表示默认插槽的位置。
   • 使用 <slot name="yourSlotName"></slot> 表示具名插槽的位置。
   • 插槽位置可以包含默认内容，当没有在父组件中提供插槽内容时显示。

5. 使用 <template> 的 # 简写：

   • 在Vue3中，可以使用 # 作为插槽的简写，例如 <template #default> 等同于 <template v-slot:default>。