文章目录
一、vue3 slot
插槽是子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码,如html、组件等。
子组件提供坑,坑里填什么由父组件决定。
子组件挖坑:
<template>
<div>
<div class="div1">
<!-- 匿名插槽 挖坑 -->
<slot></slot>
</div>
<div class="div2">
<!-- 挖坑-->
<slot name="div2"></slot>
</div>
<div class="div3">
</div>
</div>
</template>
<script setup lang='ts'>
import {
ref, reactive } from 'vue'
</script>
<style lang='scss' scoped>
.div1{
width: 200px;
height: 200px;
background-color: yellow;
}
.div2{
width: 200px;
height: 200px;
background-color: blueviolet;
}
.div3{
width: 200px;
height: 200px;
background-color: pink
}
</style>
父组件填坑
<template>
<div>
右侧内容区域
<A>
<!-- 填坑 -->
<template v-slot>
<h2>匿名插槽</h2>
</template>
<template v-slot:div2>
<h2>具名插槽</h2>
</template>
</A>
</div>
</template>
<script setup lang='ts'>
import {
ref, reactive, markRaw } from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
</script>
<style lang='scss' scoped>
</style>
子组件通过插槽向父组件传数据
子组件
<template>
<div>
<div class="div1">
<!-- 匿名插槽 -->
<slot></slot>
</div>
<div class="div2">
<div v-for="(item, index) in data">
<!-- 通过这个坑向父组件传数据过去了 -->
<slot name="div2" :index="index" :data="item"></slot