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>
相关推荐
小刘不知道叫啥14 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
ziyue757514 小时前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰15 小时前
HTML语义化:当网页会说话
前端·html
冰万森15 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr15 小时前
Ajax 技术详解
前端
浩男孩15 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学15 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空15 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞16 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端