vue中的slot插槽,彻底搞懂及使用

1、使用slot站位,不传内容,显示默认值

javascript 复制代码
//父组件
import SlotChild from './projectConstruction-child/SlotChild.vue'
<div>
    <SlotChild></SlotChild>
</div>

//子组件
<template>
  <div>下面是插槽内容</div>
  <div><slot>我是默认值</slot></div>
</template>

2、使用slot站位,传内容,不显示默认值

javascript 复制代码
//父组件
import SlotChild from './projectConstruction-child/SlotChild.vue'
<div>
    <SlotChild>text</SlotChild>
</div>

//子组件
<template>
  <div>下面是插槽内容</div>
  <div><slot>我是默认值</slot></div>
</template>

3、多个插槽时为了分清每一个插槽 所以需要 具名插槽 传值显示值,不传显示默认值

javascript 复制代码
//父组件
<SlotChild>
                <template #header>
                  <h3>text</h3>
                </template>
                <template>
                  <h3>foot</h3>
                </template>
 </SlotChild>
//子组件
<template>
  <div>下面是插槽内容</div>
  <div><slot name="header">我是默认值</slot></div>
  <div><slot name="footer">我是默认值</slot></div>
</template>

4、作用域插槽

javascript 复制代码
//父组件  #main="data" 接收slot传来的值
<SlotChild>
                <template #header>
                  <h3>text</h3>
                </template>
                <template #main="data">
                  <h3>{{ data }}</h3>
                </template>
                <template>
                  <h3>foot</h3>
                </template>
 </SlotChild>
//子组件  传递数据slotArr
<template>
  <div>下面是插槽内容</div>
  <div><slot name="header">我是默认值</slot></div>
  <div><slot name="main" :arr="slotArr"></slot></div>
  <div><slot name="footer">我是默认值</slot></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const slotArr = ref(['aaa', 'bbb', 'ccc', 'ddd'])
</script>

5、遍历数据

javascript 复制代码
//父组件
<SlotChild>
                <template #header>
                  <h3>text</h3>
                </template>
                <template #main="data">
                  <ul>
                    <li v-for="e in data.arr" :key="e">{{ e }}</li>
                  </ul>
                </template>
                <template>
                  <h3>foot</h3>
                </template>
</SlotChild>
//子组件
<template>
  <div>下面是插槽内容</div>
  <div><slot name="header">我是默认值</slot></div>
  <div><slot name="main" :arr="slotArr"></slot></div>
  <div><slot name="footer">我是默认值</slot></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const slotArr = ref(['aaa', 'bbb', 'ccc', 'ddd'])
</script>
相关推荐
心.c6 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
IT_陈寒35 分钟前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥41 分钟前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫1 小时前
Vue全局事件总线
前端·javascript·vue.js
Lovereo1 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
T___T1 小时前
JavaScript 变量声明详解:var、let、const 的核心差异
javascript·面试
蒙娜丽宁1 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花1 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端1 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端
白水清风1 小时前
Vue3之渲染器
前端·vue.js·面试