Vue3 具名插槽的使用

组件App.vue

<template>
  <childd>
    <template v-slot:s2>
      <!-- 显示到插槽名为s2里面 -->
      <p>性名：luoFenMing</p>
      <p>性别：男</p>
      <p>年龄：18</p>
    </template>
    <template #s1>
      <!-- 显示到插槽名为s1里面 v-slot:也可以用【#】代替-->
      <h1>用户信息</h1>
    </template>
  </childd>
</template>
<script setup lang="ts">
import childd from '@/components/Child.vue'

</script>
<style scoped></style>

子组件/components/Child.vue

<template>
    <div class="child">
        <slot name="s1">默认插槽，没有内容时，显示这个默认内容</slot>
        <slot name="s2">默认插槽，没有内容时，显示这个默认内容</slot>
    </div>
</template>
<script setup lang="ts" >
</script>

<style>
.child {
    border: 1px red solid;
}
</style>

本文来自 www.luofenming.com