具名插槽作用域
其实就是在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="headerProps">
<div>hearder
{{ headerProps.title }}
</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" title="标题"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
</div>
</template>
<script setup></script>
<style></style>
人工智能学习网站