vue3插槽的使用

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 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}=context
      return () => (
        <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>
输出结果:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/12087.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

逐一解释一下四个 “内存屏障” 是什么

什么是内存屏障&#xff1f;硬件层⾯&#xff0c;内存屏障分两种&#xff1a;读屏障&#xff08;Load Barrier&#xff09;和写屏障&#xff08;Store Barrier&#xff09;。内存屏障有两个作⽤&#xff1a; 阻⽌屏障两侧的指令重排序&#xff1b;强制把写缓冲区/⾼速缓存中的…

【软考备战·希赛网每日一练】2023年4月18日

文章目录 一、今日成绩二、错题总结第一题第二题第三题 三、知识查缺 题目及解析来源&#xff1a;2023年04月18日软件设计师每日一练 一、今日成绩 二、错题总结 第一题 解析&#xff1a; MTTF&#xff1a;平均无故障时间 MTTR&#xff1a;平均故障修复时间 可用性/可靠性MTTF…

一觉醒后ChatGPT 被淘汰了

OpenAI 的 Andrej Karpathy 都大力宣传&#xff0c;认为 AutoGPT 是 prompt 工程的下一个前沿。 近日&#xff0c;AI 界貌似出现了一种新的趋势&#xff1a;自主人工智能。 这不是空穴来风&#xff0c;最近一个名为 AutoGPT 的研究开始走进大众视野。特斯拉前 AI 总监、刚刚回归…

zookeeper + kafka集群搭建详解

目录 1.消息队列介绍 1.为什么需要消息队列 &#xff08;MO&#xff09; 2.使用消息队列的好处 3.消息队列的两种模式 2.Kafka相关介绍 1.Kafka定义 2.Kafka简介 3. Kafka的特性 3.Kafka系统架构 1. Broker&#xff08;服务器&#xff09; 2. Topic&#xff08;一个队…

SAR ADC系列25:作业和上机实践

作业&#xff1a; 异步SAR逻辑中VALID信号如何产生&#xff1f;答&#xff1a;OUTP和OUTN与非。单纯通过减小“比较器环路”的延时(t1t22*t32*t4)的方式来提升ADC的转换速率可行吗&#xff1f;为什么&#xff1f;答&#xff1a;不可行&#xff0c;还要考虑CDAC建立的速度&…

人工智能大模型多场景应用原理解析

前言 在上篇文章《人工智能大模型之ChatGPT原理解析》中分享了一些大模型之ChatGPT的核心原理后&#xff0c;收到大量读者的反馈&#xff0c;诸如:在了解了核心原理后想进一步了解未来的发展趋势(比如生成式人工智能和元宇宙能擦出什么样的火花&#xff1f;)&#xff0c;大模型…

抢鲜发布:Flutter 3.7更新详解

本文首发自「慕课网」(imooc.com)&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"&#xff01; 作者&#xff1a;CrazyCodeBoy|慕课网讲师 新年伊始&#xff0c;由 Flutter 3.7 正式版来「打头阵」&#xff01;我们与整个…

Parallels Desktop for Mac 适用于苹果 macOS 的 PD 虚拟机(安装使用详细教程)

简介 Parallels Desktop for Mac 是一款适用于苹果 macOS 操作系统的虚拟机软件&#xff0c;可以让用户在 Mac 上运行 Windows、Linux 等其他操作系统&#xff0c;同时也可以在虚拟机中安装其他软件和应用程序。Parallels Desktop for Mac 还提供了许多实用的功能&#xff0c;…

【蓝桥杯】数组中存在K倍区间的子数组个数

文章目录 前言题目分析算法难度实战1、创建算法2、创建测试用例3、运行测试用例4、测试结果 总结 前言 蓝桥杯全国软件和信息技术专业人才大赛由工业和信息化部人才交流中心主办,每年参赛人数超过30000人。蓝桥杯大赛作为国内领先的全国性 IT 学习赛事&#xff0c;持续有力支撑…

软件测试员----面试,你准备好了么?

最近有机会做一些面试工作&#xff0c;主要负责面试软件测试人员招聘的技术面试。 之前一直是应聘者的角色&#xff0c;经历了不少次的面试之后&#xff0c;多少也积累一点面试的经验&#xff0c;现在发生了角色转变。初次的面试就碰到个工作年限比我长的&#xff0c;也没有时间…

【jvm系列-04】精通运行时数据区共享区域---堆

JVM系列整体栏目 内容链接地址【一】初识虚拟机与java虚拟机https://blog.csdn.net/zhenghuishengq/article/details/129544460【二】jvm的类加载子系统以及jclasslib的基本使用https://blog.csdn.net/zhenghuishengq/article/details/129610963【三】运行时私有区域之虚拟机栈…

罗丹明-聚乙二醇-生物素RB-PEG-Biotin;Biotin-PEG-Rhodamine,PEG2000

RB-PEG-Biotin 罗丹明-聚乙二醇-生物素 中文名称&#xff1a;罗丹明-聚乙二醇-生物素 英文名称&#xff1a;RB-PEG-Biotin 分子量&#xff08;PEG &#xff09;&#xff1a;2000、3400、5000&#xff0c;其他分子量可以定制。 用 途&#xff1a;仅供科研实验使用。 性状&…

不会注册ChatGPT?4个国内网站让你尽情体验

最近火出圈的科技新词非“ChatGPT”莫属了。 但是由于ChatGPT注册起来比较困难&#xff0c;我到现在都还学不会如何注册.... 但是&#xff01;世上无难事&#xff01;只要有心人&#xff01; 我千辛万苦终于找到几个ChatGPT平替的网站了。 AI中文智能对话 地址&#xff1a;…

DPDK入门(环境搭建以及小demo)

文章目录零、从0开始配置dpdk环境的虚拟机一、dpdk的编译usertool/dpdk-setup.sh二、dpdk需要什么配置来支持1.多队列网卡2.巨页三、解析接收网络数据的过程经历了什么1.物理网卡2.NIC3.内核协议栈4.标准接口层Posix API5. 应用层上述过程发生的拷贝四、DPDK介绍基于上述接收网…

人人看得懂的AI教程

人人看得懂的AI教程&#xff0c;从0开始入门AI教程&#xff0c;一步一步AI&#xff0c;人工智能学习笔记 现在写书真的方便&#xff0c;闲来无事写了本从0开始学AI的书籍&#xff0c;哈哈 一、基础知识 1.1 人工智能概览 1.2 机器学习 1.3 深度学习 1.4 数据科学 二、编程知…

chatGPT中文版入口-chatGPT不可以用的地区

ChatGPT老出现不可用 如果您在使用ChatGPT时发现它经常不可用&#xff0c;可能是由于以下原因&#xff1a; OpenAI API的服务不稳定。由于技术问题、网络问题或维护&#xff08;如软件更新&#xff09;等原因导致OpenAI API服务不稳定&#xff0c;会导致ChatGPT无法使用。 接…

2345看图王阻止文件删除和U盘弹出 - 解决方案

2345看图王阻止文件删除和U盘弹出 - 解决方案前言2345看图王解决方案临时方案永久方案前言 用户在使用2345看图王查看图片后&#xff0c;可能会出现图片文件/文件夹无法删除或U盘无法弹出等问题&#xff0c;这是因为2345看图王的辅助模块正在占用图片文件&#xff0c;因此无法…

VS2022下载安装与基本使用(写C语言)

最近遇到一种问题&#xff0c;就是想要写一写C语言的代码&#xff0c;但是网页编辑器功能不全&#xff0c;GCC需要安装Liunx系统&#xff0c;VS又体量太大过于复杂&#xff0c;用keil又需要连接硬件&#xff0c;所以比较纠结。 工作中通常使用的是Keil&#xff0c;但是如果有时…

Nginx实现会话保持,集群模式下session域共享

前言 生产环境下&#xff0c;多数系统为了应对线上多种复杂情况而进行了集群架构的部署&#xff0c;保证系统的高性能、价格有效性、可伸缩性、高可用性等。通常将生产环境下的域名指向Nginx服务&#xff0c;通过它做HTTP协议的Web负载均衡。 session是什么 在计算机中&…

8万字智慧旅游景区信息化建设方案word

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。 1.1. 整体建设框架 XXXXXX智慧景区旅游建设对于全面整合景区旅游资源&#xff0c;提升景区旅游产业发展能级&#xff0c;进一步增强景区旅游业的核心竞争力具有十分重要的支…