Vue3和Vue2插槽几乎没有区别
所谓插槽,在我理解就是在子组件里挖个坑,把父组件内容填入坑里。再直接一点就是把子组件标签中的内容填入到子组件内部的标签中
组件插槽非常简单,共分为四种
- 匿名插槽(默认插槽)
- 具名插槽
- 作用域插槽
- 动态插槽
写法
一、匿名插槽
注意:
在匿名插槽中,v-slot 可写为 v-slot:default 可简写 #default 匿名插槽最多只能有一个。
父组件
<child>
<template v-slot> // 匿名插槽 插入子组件 匿名位置 (匿名位置有且只有一个)
<span>我是插槽值</span>
</template>
</child>
子组件
// child组件
<div>
<span>我是子组件</span>
<slot></slot> // 此处插入父组件中template的内容
</div>
二、具名插槽
在父组件 v-slot: 插入的名称 在子组件中 指定slot坑的名称 父组件与子组件名称相同就会插入到对应位置啦。
父组件
<child>
<template v-slot:header> // 具名插槽 插入子组件指定name 处
<span>我是插槽值--插入头部</span>
</template>
</child>
子组件
// child组件
<div class="header">
<span>头部</span>
<slot name="header"></slot>
</div>
三、作用域插槽
子组件将值传入slot 父组件就能拿到子组件值 注意写法是 v-slot:具名=“scope” scope是子组件所有数据的集合,一般可将子组件传入的值解构 v-slot:具名=“{ 子组件传入的值 }” 结合elementui 的表格理解一下
父组件
<child>
<template v-slot:footer="{ row }"> // 作用域插槽 v-slot:footer="{row}" 可将v-slot 简写为# #footer="{row}" row为子组件传入父组件的值
<span>我是插槽值--插入尾部{{ row.name }}----{{ row.age }}</span>
</template>
</child>
子组件
// child组件
<div class="footer">
<div v-for="(item, index) in tableData">
<slot name="footer" :row="item"></slot>
</div>
</div>
四、动态插槽
将插入的名称作为变量,修改变量值可实现动态插槽
<template #[name]> // 动态插槽
<h2>我是动态插槽</h2>
</template>
<script setup lang='ts'>
let name = ref('default') // 插入默认位置
let name = ref('header') // 插入 name 为 header 的插槽
</script>