vue3具名插槽（slot）

Index.vue:

<script setup>
import { onMounted } from 'vue'
import Child from './Child.vue'
import './index.css'


onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <Child>
      <template #header>
        <div>hearder</div>
      </template>
      <template #main>
        <div>
          main
        </div>
      </template>
      <template #footer>
        <div>footer</div>
      </template>
    </Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

<template>
  <div>
    <slot name="header"></slot>
    <slot name="main"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script setup></script>

<style></style>

人工智能学习网站

https://chat.xutongbao.top