Vue3 默认插槽的使用

组件App.vue

<template>
  <childd title="组件标题">
    <!-- 组件标签里面的html内容显示到默认插槽 -->
    <p>性名：luoFenMing</p>
    <p>性别：男</p>
    <p>年龄：18</p>
  </childd>
</template>
<script setup lang="ts">
import childd from '@/components/Child.vue'

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

子组件/components/Child.vue

<template>
    <div class="child">
       <h1>{{ props.title }}</h1>
       <slot>默认插槽，没有内容时，显示这个默认内容</slot>
    </div>
</template>
<script setup lang="ts" >
const props = defineProps({
    title: String
})
</script>

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

本文来自 www.luofenming.com