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>
相关推荐
「、皓子~20 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了22 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_24 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术39 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛1 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js