vue3插槽的使用

news/2024/4/25 0:21:01/

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。

1.插槽基本使用

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><!-- 插槽 --><slot></slot></div></template>
<script setup lang="ts">
</script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent></SlotComponent></div>
</template><script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>
输出结果:

在这里插入图片描述

2.插槽默认内容

<template><div class="child-box"><p>我是子组件</p><!-- 插槽 --><slot><p>我是默认内容</p></slot></div>
</template>
<script setup lang="ts"></script>
输出结果:

在这里插入图片描述

3.具名插槽

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>
<script setup lang="ts"></script>

上段代码中我们添加了 3 个 slot 插槽,并且给其中两个 slot 标签添加了一个 name 属性,也就是每个插槽的名字。需要注意的是,上段代码中有一个插槽我们没有添加 name 属性,这个时候 Vue 会隐式的将这个插槽命名为“default”,

父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header><div>我是 header{{ message }}</div></template><template #default><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div></template><template #footer><div>我是 footer{{ message }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
const message = ref("---我是父组建中的数据");
</script>
输出结果:

在这里插入图片描述

4.简写

原写法
<template v-slot:footer></template>
简写
<template #footer></template>

默认插槽与具名插槽混用

当一个子组件中既有具名插槽,又有默认插槽时,该如何渲染呢?

前面我们说默认插槽会被隐式的命名为 default,所以我们传入内容时可以将插槽名字改为 defalut 即可。

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header><div>我是 header{{ message }}</div></template><template #default><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div><div>我没有名字{{ message }}</div></template><template #footer><div>我是 footer{{ message }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
const message = ref("---我是父组建中的数据");
</script>
输出结果:

在这里插入图片描述

5.插槽作用域问题

上段代码中 message 是我们在父组件中定义的数据,但是在我们的子组件SlotComponent 中渲染了出来,说明子组件中的插槽是可以访问到父组件中的数据作用域的,但是反过来是不行的,因为我们无法通过插槽拿到子组件的数据。

- 总结:
  • 插槽内容可以访问到父组件的数据作用域,就好比上述中的 message 是父组件的。
  • 插槽内容无法访问到子组件的数据,就好比上述 App.vue 中的插槽内容拿不到子组件 child 的数据。

6.作用域插槽

前一节我们说父组件中的插槽内容是无法访问到子组件中的数据的,但是,万一我们有需求就是需要在插槽内容中获取子组件数据怎么办呢?

6.1默认插槽作用域传值

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><slot text="我是子组件" :count="1"></slot></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent v-slot="slotProps"><div>{{ slotProps.text }}---{{ slotProps.count }}</div></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>
输出结果:

在这里插入图片描述
上段代码中我们在子组件中 slot 标签上添加了一些自定义属性,属性值就是我们想要传递给父组件的一些内容。在父组件 中通过 v-slot="slotProps"等形式接收子组件传过来的数据,slotProps 的名字是可以任意取的,它是一个对象,包含了所有传递过来的数据。

需要注意的是,子组件传递过来的数据只能在子组件这个标签内使用。

父组件解构写法:
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent v-slot="{ text, count }"><div>{{ text }}---{{ count }}</div></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

6.2具名插槽作用域传值

子组件SlotComponent.vue
<template><div class="child-box"><p>我是子组件</p><slot name="header" text="我是子组件的" :count="1"></slot></div>
</template>
<script setup lang="ts"></script>
父组件
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #header="{ text, count }"><div>{{ text }}---{{ count }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

上段代码中我们给 slot 添加了一个 name,在父组件中接收数据的时候不在采用 v-slot=““形式了,而是直接再插槽内容上采用#header=”“形式,当时这是简写形式,你也可以写为:v-slot:header=””

6.tsx中插槽的使用

子组件
<script lang="tsx">import { defineComponent} from 'vue';export default defineComponent({setup(props, context) {const {slots}=contextreturn () => (<div>默认插槽: {slots.default && slots.default()}</div>);},});
</script>
<style scoped></style>
父组建写法一
<script lang="tsx">import { defineComponent } from 'vue';import Child from './component/child.vue'export default defineComponent({setup() {const text = ref("欢迎");return () => (<div style="color: red" class="my-test"><h1 v-text={text.value}></h1><p>333</p><Child v-slots={{default: () => '默认的内容是'}}/></div>);},});
</script>
<style scoped></style>
父组建写法二
<script lang="tsx">import { defineComponent } from 'vue';import Child from './component/child.vue'export default defineComponent({setup() {const text = ref("欢迎");return () => (<div style="color: red" class="my-test"><h1 v-text={text.value}></h1><p>333</p><Child>{{default: () => '默认的内容是'}}</Child></div>);},});
</script>
<style scoped></style>
输出结果:

在这里插入图片描述

7.插槽高阶用法

  • 实际开发中可以遇到组件层层嵌套,如果遇到一下情况如何解决。
    7.1. 如果父组件需要拿到子组件的数据
    7.2. 父组件还需要拿到孙组件的数据
父组件 useSlot.vue
<template><div class="demo1"><h1>我是父组建</h1><SlotComponent><template #action="data"><div>我是 action----{{ data.text }}</div></template><template #SlotDemo="data"><div>我是 SlotDemo----{{ data.obj.text }}</div></template></SlotComponent></div>
</template>
<script setup lang="ts">
import SlotComponent from "./component/SlotComponent.vue";
</script>

注释:

  • #action="data"中的data为子组件中传递过来的数据
  • #SlotDemo="data"中的data为孙组件中传递过来的数据
子组件 SlotComponent.vue
<script lang="tsx">
import SlotDemo from "./SlotDemo.vue";
import { Slots } from 'vue'
export default defineComponent({name:'SlotComponent',setup(props,{ attrs,slots,emit,expose }){let state=reactive({ text:'我是子组件中的数据' })//slots收到的插槽集合//slot 当前插槽的名字  默认是default//data 要传给插槽的数据const getSlot = (slots: Slots, slot = 'default', data?: Recordable) => {const slotFn = slots[slot] //获取到父组件SlotDemo插槽if (!slotFn) return null //如果没在父组件找到插槽  就return nullreturn slotFn(data)// 将数据data传递给父组件中的插槽}return () =>(<><div>{slots.action?.(state)}</div><SlotDemo>{{  default: (data) => getSlot(slots,'SlotDemo',data),}}</SlotDemo></>)}
})
</script>

注释:

  • default: (data) => getSlot(slots,'SlotDemo',data),:default代表SlotDemo组件中的默认插槽data表示SlotDemo组件上v-bind绑定的参数,
  • getSlot(slots,'SlotDemo',data):在slots中找到插槽SlotDemo,将参数data传给插槽SlotDemo,并返回插槽SlotDemo中的内容。
孙组件 SlotDemo.vue
<template><div class="SlotDemo"><slot :obj="obj"></slot></div>
</template>
<script>
export default defineComponent({setup() {let obj=reactive({ text:'我是孙子组件' })return { obj }},
})
</script>

注释:

  • :obj="obj"表示要传给父组件的数据
输出结果:

在这里插入图片描述


http://www.ppmy.cn/news/47670.html

相关文章

【计算机专业应届生先找培训还是先找个工作过渡一下?】

计算机专业应届生先找培训还是先找个工作过渡一下&#xff1f; 计算机应届生是先培训还是先工作&#xff0c;这个问题应该困扰了很多专业技能一般的同学&#xff0c;尤其是学历方面还没有优势的普通本专科院校。都说技术与学历优秀的人进大厂&#xff0c;技术一般学历优秀的人能…

树莓派 QT项目开机自启动

我自己用qt设置了一个界面&#xff0c;如何让他开机自启动呢&#xff1f; 目录 1.生成qt项目的可执行文件 2. 编写一个自启动脚本 3.重启树莓派 1.生成qt项目的可执行文件 QT项目的可执行文件就是.exe文件。首先在qt中打开&#xff0c;点击红色方框图标&#xff0c;选择Re…

IO进程间的通信详解(嵌入式学习)

进程间通信 这次更新内容比较干巴&#xff0c;满满嚼&#xff0c;把例子敲一遍好好理解。如果您着急&#xff0c;请直接打开目录跳转到对您有价值的部分管道无名管道(PIPE)特点使用方法举个栗子 有名管道(FIFO)特点使用方法举个栗子 信号概念响应方式信号函数举个栗子&#xff…

冯诺依曼体系结构+操作系统

目录 冯诺依曼体系结构 基本概念 基本原理 操作系统 基本概念 设计OS的目的 管理的本质 管理的方法 系统调用和库函数 冯诺依曼体系结构 基本概念 冯诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。 ... 数学…

24个强大的HTML属性,建议每位前端工程师都应该掌握!

HTML属性非常多&#xff0c;除了一些基础属性外&#xff0c;还有许多有用的特别强大的属性 本文将介绍24个强大的HTML属性&#xff0c;可以使您的网站更具有动态性和交互性&#xff0c;让用户感到更加舒适和愉悦。 让我们一起来探索这24个强大的HTML属性吧&#xff01; 1、Acc…

js+css实现简单的弹框动画

效果图 只是一个简单的演示demo&#xff0c;但是可以后面可以优化样式啥的 刚开始元素的display为none&#xff0c;然后&#xff0c;为了给元素展示时添加一个动画&#xff0c;首先要添加样式类名show&#xff0c;让它覆盖display:none&#xff0c;变得可见。然后&#xff0c;添…

docker+jenkins+maven+git构建聚合项目,实现自动化部署,走了800个坑

流程 主要的逻辑就是Docker上安装jenkins&#xff0c;然后拉取git上的代码&#xff0c;把git上的代码用Maven打包成jar包&#xff0c;然后在docker运行 这个流程上的难点 一个是聚合项目有可能Maven install的时候失败。 解决办法&#xff1a;在基础模块的pom文件上添加 <…

【数据结构】堆的应用(堆排序的实现 + (向上/向下)建堆时间复杂度证明 + TopK问题(笔记总结))

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&…

Flink Table API 和 Flink-SQL使用详解

Flink Table API 和 Flink-SQL使用详解 1.Table API & Flink SQL-核心概念 ​ Apache Flink 有两种关系型 API 来做流批统一处理&#xff1a; Table API Table API 是用于 Scala 和 Java 语言的查询API&#xff0c;它可以用一种非常直观的方式来组合使用选取、过滤、join…

RK3568平台开发系列讲解(调试篇)IS_ERR函数的使用

🚀返回专栏总目录 文章目录 一、IS_ERR函数用法二、IS_ERR函数三、内核错误码沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 IS_ERR 函数的使用。 一、IS_ERR函数用法 先看下用法: 二、IS_ERR函数 对于任何一个指针来说,必然存在三种情况: 一种是合…

电源常识-PCB材质防火等级焊锡工艺

1、目前主流的PCB材质分类主要有以下几种,如图1&#xff0c;图2&#xff0c;图3。FR-4材质比CEM-1好&#xff0c;CEM-1比FR-1好。 按结构分为单面板&#xff0c;双面板&#xff0c;多层板。单面板就是单面铺铜走线&#xff0c;双面板就是上下两面都可以铺铜走线&#xff0c;多层…

Guns社区医疗项目

又是一年毕业季&#xff0c;计算机专业大四的同学们要接受毕业设计的考验啦。又有多少同学为了毕业设计而愁眉苦脸&#xff0c;心力憔悴。考虑到这些&#xff0c;这里为同学们分享一个适合你们毕业设计的作品以及详细介绍&#xff0c;让正在焦头烂额的同学们有所启发&#xff0…

asp.net+C#房地产销售系统文献综述和开题报告+Lw

本系统使用了B/S模式&#xff0c;使用ASP.NET语言和SQL Server来设计开发的。首先把所有人分为了用户和管理员2个部分&#xff0c;一般的用户可以对系统的前台进行访问&#xff0c;对一般的信息进行查看&#xff0c;而注册用户就可以通过登录来完成对房屋信息的查看和对房屋的…

开发插件JFormDesigner(可视化GUI编程)的使用与注册-简单几步即可完成

开发插件JFormDesigner&#xff08;可视化GUI编程&#xff09;的使用与注册 获取链接&#xff1a;1.JFormDesigner获取2.记录插件下载路径3.使用zcj注册4.生成license5.打开idea进行注册 获取链接&#xff1a; https://pan.baidu.com/s/1N9ua2p3BpiMIARCEewRxIw?pwd4e9a 提取…

浅说情绪控制被杏仁体劫持

2023年4月16号&#xff0c;没想到被杏仁体劫持那么严重&#xff0c;触发手抖和口干的症状&#xff0c;这个还真是自己完全没有意识到的【这就是焦虑固化的记忆会持续化】。 【修行】人生要修炼两条线&#xff1a;一条明线是做的事情&#xff0c;那是自己要做的具体事情。 一条…

天梯赛 L2-034 口罩发放

原题链接&#xff1a; PTA | 程序设计类实验辅助教学平台 题目描述&#xff1a; 为了抗击来势汹汹的 COVID19 新型冠状病毒&#xff0c;全国各地均启动了各项措施控制疫情发展&#xff0c;其中一个重要的环节是口罩的发放。 某市出于给市民发放口罩的需要&#xff0c;推出了…

python-day6(补充三:实例变量和函数)

实例变量和函数 实例函数的定义认识__init__函数定义实例变量实例函数中访问实例变量外部访问实例变量与函数 实例函数的定义 定义实例函数 class Student:def say_hello(self, msg):print(f"hello{msg}")实例函数属于对象 class Student:def say_hello(self, m…

JMM之volatile关键字详解

1、概要 在JMM规范下有三大特性分别是&#xff1a;可见性、原子性、有序性。而被volatile关键字修饰的共享变量拥有三大特性的两大特性分别是&#xff1a;可见性和有序性。 为什么被volatile修饰的变量就可以保证变量的可见性和有序性呢&#xff1f;为啥不能保证原子性&#…

使用 PyTorch Geometric 和 GCTConv实现异构图、二部图上的节点分类或者链路预测

解决问题描述 使用 PyTorch Geometric 和 Heterogeneous Graph Transformer 实现异构图上的节点分类 在二部图上应用GTN算法(使用torch_geometric的库HGTConv)&#xff1b; 步骤解释 导入所需的 PyTorch 和 PyTorch Geometric 库。 定义 x1 和 x2 两种不同类型节点的特征&am…

如何在 TensorFlow 中使用 GPU 加速深度学习计算?

一、前言 TensorFlow 是由 Google 开源的深度学习框架,它具有易用、高效、灵活等特点,被广泛应用于学术界和工业界中。而 GPU 是一种高性能的计算设备,可以加速深度学习的计算过程。本文将介绍如何在 TensorFlow 中使用 GPU 加速深度学习计算。 二、安装 TensorFlow 安装…