Vue插槽的使用

33. Vue插槽的使用

1. 定义

Vue插槽是Vue组件中一种非常强大和灵活的功能，它允许你在组件的模板中预留出一些位置，以便在使用该组件的时候，动态地将内容插入到这些位置上。

Vue插槽分为匿名插槽、具名插槽和作用域插槽。匿名插槽可以被任何未命名的插槽内容使用，具名插槽可以为多个插槽提供不同的名称以便于标识和使用，作用域插槽允许你在父组件中使用子组件中的数据。

2. 匿名插槽

<!-- slotCom.vue -->
<template>
  <div class="slot">
    <h4>这是匿名插槽组件</h4>
    <slot>
      默认内容，会被显示插入的内容替代，用于没有插入内容时显示
      <!-- 插槽内容会显示在这里 -->
    </slot>
  </div>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
    <SlotCom>
      在此写入内容
    </SlotCom>
  </div>
</template>

3. 具名插槽

<!-- slotCom.vue -->
<template>
  <div class="slot">
    <h4>这是具名插槽组件</h4>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
   <SlotCom>
      <template v-slot:header>
        header插槽的内容
      </template>
      <!-- 具名插槽简写 -->
      <template #footer>
        footer插槽的内容
      </template>
    </SlotCom>
  </div>
</template>

4. 作用域插槽

<!-- slotCom.vue -->
<template>
  <slot text="propsText" count="1"></slot>
</template>

<!-- pages.vue -->
<script>
import SlotCom from "./slotCom.vue"
</script>
<template>
  <div class="pages">
    <SlotCom>
      <template v-slot="slotProps">
        {
  { slotProps.text }} -- {
  { slotProps.count }}
      </template>
    </SlotCom>
  </div>
</template>