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>
相关推荐
dr李四维10 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_24 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~31 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ35 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z40 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴44 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue