vue3 - slot 插槽:插槽的作用是比如我们声明一个公共组件,在每个模块中引用公共组件的时候,可能某些模块的内容不一样,为了可以在单页面中方便自定义想要的内容。
1. slot匿名插槽:
我们声明一个子组件,在父组件中引用
index 父组件:
<template>
<div>
<Card>
<template v-slot>
匿名插槽插入成功
</template>
</Card>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import Card from './components/Card.vue'
</script>
<style scoped>
</style>
Card 子组件:
<template>
<div>
<header></header>
<section>
<div>
<slot></slot>
</div>
</section>
<footer></footer>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
</script>
<style scoped>
</style>
2. slot具名插槽:
index 父组件:
<template>
<div>
<Card>
<template v-slot:header>
<div>头部header内容</div>
</template>
<template v-slot:content>
<div>中部content内容</d