vue3中三种插槽

匿名插槽

        匿名插槽没有为插槽指定名称，你们插槽一般在只有一个的时候使用，所有的东西会填充在一个插槽内

父组件

<template>
  <div>
    <!-- 匿名插槽 -->
    <Nim>
      <p>默认内容</p>
    </Nim>
  </div>
</template>

子组件

<template>
    <div>
        <slot>匿名插槽</slot>
    </div>
</template>

具名插槽

在父组件中，可以通过 v-slot:slotName 来指定具名插槽的名称，子组件通过 <slot name="slotName"></slot> 来接收具名插槽内容。

父组件

<template>
  <div>
    <!-- 具名插槽 -->
    <Jum>
      <template v-slot:header>
        <p>插槽头部内容</p>
      </template>
      <template v-slot:default>
        <p>插槽默认内容</p>
      </template>
      <template v-slot:footer>
        <p>插槽底部内容</p>
      </template>
    </Jum>
  </div>
</template>

子组件

<template>
    <div>
        <slot name="header">头部</slot>
        <slot>默认</slot>
        <slot name="footer">底部</slot>
    </div>
</template>

如果子组件找不到名字会渲染默认内容

当父组件需要向子组件传递多个具有不同名称的插槽内容时，可以使用具名插槽。比如在子组件中需要区分不同位置的内容，比如头部、尾部等，就可以使用具名插槽来实现

作用域插槽

通常同于子组件需要给父组件传值时使用

父组件

<template>
  <div>
    <!-- 作用域插槽 -->
    <Zzy>
        <template v-slot:default="slot">
            <p>{{ slot.user.age }}</p>
        </template>
    </Zzy>
  </div>
</template>

子组件

<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const user = ref({
    name:"张三",
    age:18
})
</script>

当父组件需要向子组件传递数据，并且希望子组件能够对数据进行处理后再渲染时，可以使用作用域插槽。这种方式适合于在子组件中对插槽内容进行处理或者根据传递的数据动态渲染内容的情况。

总的来说，单个插槽适用于简单的内容传递，具名插槽适用于需要在子组件中区分不同插槽内容的情况，而作用域插槽适用于需要在子组件中对插槽内容进行处理或者根据传递的数据动态渲染内容的情况。根据具体的需求选择合适的插槽方式，可以使得组件设计更加灵活和可维护。