vue3的插槽slots

news2024/11/14 18:38:35

文章目录

    • 普通插槽
      • Test.vue
      • FancyButton.vue
    • 具名插槽
      • Test.vue
      • BaseLayout.vue
    • 作用域插槽
      • 默认插槽
        • Test.vue
        • BaseLayout.vue
      • 具名作用域插槽
        • Test.vue
        • BaseLayout.vue

普通插槽

父组件使用子组件时,在子组件闭合标签中提供内容模板,插入到子组件定义的出口的地方

在这里插入图片描述

Test.vue


<template>
    父组件: start - {{ parentMsg }}
    <br/>
    <fancy-button>
    	                        <!-- 注意点: 这里是默认插槽内容,如果使用template标签来包裹的话, 
    	                                    就必须加上#default,否则不会渲染出来 -->
        点我解锁 {{ parentMsg }} <!-- 插槽内容 -->
                                <!-- 插槽内容是可以使用父模板中定义的数据 -->
                                <!-- 插槽内容无法访问子组件的数据 -->
                                <!-- 父组件模板中的表达式只能访问父组件的作用域;
                                     子组件模板中的表达式只能访问子组件的作用域。 -->
    </fancy-button>
    
    <fancy-button>
        						<!-- 未提供插槽内容给插槽, 子组件中的插槽将使用插槽中的默认内容 -->
    </fancy-button>
    <br/>
    父组件: end
</template>

<script lang="ts" setup>
import FancyButton from './FancyButton.vue';
const parentMsg = 'halo parent'

</script>
<style lang="scss"></style>

FancyButton.vue

<template>
    子组件: start - {{ sonMsg }}
    <br/>
    <button>
        <slot>默认内容: {{ sonMsg }}</slot> <!-- 插槽出口 -->
        					               <!-- 当没有提供插槽内容的情况下, 就展示“默认内容” -->
    </button>
    <br/>
    子组件: end
</template>

<script lang="ts" setup>

const sonMsg = 'halo son'

</script>

<style lang="scss">

</style>
  

具名插槽

在一个组件中可以定义多个插槽出口slot,每个插槽出口slot可以使用name属性标识插槽名,称为具名插槽(没有提供 name 的 <slot> 出口会隐式地命名为“default”
在这里插入图片描述

Test.vue

<template>
    <BaseLayout>

        <template v-slot:header>    <!-- 将会把这块插入到BaseLayout组件中定义的名为header的插槽中 -->
            <p>-{{ parentMsg }}-</p><!-- 如果BaseLayout组件中定义了多个名为header的插槽, 则每个都会插入 -->
        </template>                 <!-- 可以将v-slot:header简写为 #header -->


        <template #default>          <!-- 将 v-slot:default 简写为 #default -->
            <p>+默认内容+</p>         <!-- 默认插槽可以不使用template包裹, 直接写即可,
                                          这是因为当一个组件同时接收默认插槽和具名插槽时,
                                          所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容
                                      -->
        </template>

        <template v-slot:[pos]>       <!-- 动态插槽名, 当通过下面changePos修改pos值时, 插槽内容会切换到不同地方 -->
            <span>*{{ parentMsg }}*</span>
        </template>

    </BaseLayout>
    <hr/>
    <button @click="changePos">切换动态插槽名{{pos}}</button>
    

</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import BaseLayout from '@/views/test/BaseLayout.vue'
	
	const parentMsg = ref('parentMsg')
	const pos = ref('footer')
	const changePos = ()=>{
	    if(pos.value === 'footer'){
	        pos.value = 'outer'
	    } else {
	        pos.value = 'footer'
	    }
	}
</script>
<style lang="scss"></style>

BaseLayout.vue

<template>
    <div class="container">
        <header>
            <slot name="header"></slot> <!-- 这里会插入 -->
            <slot name="header"></slot> <!-- 这里同样会插入 -->
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer">{{ '父组件不提供的话,就展示: ' + footerContent }}</slot>
        </footer>
    </div>
    outer----<slot name="outer">{{ '父组件不提供的话,就展示: ' + outerContent }}</slot>
</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    const footerContent = ref('footerContent')
    const outerContent = ref('outerContent')
</script>

<style lang="scss"></style>

作用域插槽

父组件中定义的插槽的内容无法访问到子组件的数据,但是我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

默认插槽

在这里插入图片描述

Test.vue

<template>
									<!-- 因为这里只使用了一个默认插槽,所以可以把v-slot=slotProps写在组件的位置 -->
    <BaseLayout v-slot="slotProps"> <!-- 拿到子组件提供给插槽的数据, 
                                         ,默认省略了default, 即:本来是v-slot:default="slotProps"
                                         ,可以直接在这里解构 -->
                                    <!-- 注意: 这里使用默认插槽的情况下,不能使用template标签将下面内容包裹 -->
        {{ parentMsg }}  <!-- 本身就可以访问到父组件自身的数据 -->
        {{ slotProps }}  
        {{ slotProps.count }}
    </BaseLayout>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import BaseLayout from './BaseLayout.vue';
const parentMsg = ref('parentMsg')

</script>
<style lang="scss"></style>

或如下

<template>
    <BaseLayout>

        <template v-slot:default="slotProps"> <!-- 这里可省略为#default="slotProps" -->
            {{ parentMsg }}  <!-- 本身就可以访问到父组件自身的数据 -->
            {{ slotProps }}  
            {{ slotProps.count }}
        </template>
            
    </BaseLayout>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import BaseLayout from './BaseLayout.vue';
const parentMsg = ref('parentMsg')

</script>
<style lang="scss"></style>

BaseLayout.vue

<template>
    <div>
    	<!-- 向插槽的出口上传递 属性及值-->
        <slot :text="greetMsg" :count="1"></slot>
    </div>
</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    const greetMsg = ref('打招呼')
</script>

<style lang="scss"></style>

具名作用域插槽

在这里插入图片描述

Test.vue

<template>
    <BaseLayout>

        <template #default="defaultProps">
            {{ parentMsg }}  <!-- 本身就可以访问到父组件自身的数据 -->
            {{ defaultProps }}  
            {{ defaultProps.count }}
        </template>
            
        <template #title="{name,age}">
            title - {{ parentMsg }}
            title - {{ name }} - {{ age }}
        </template>

    </BaseLayout>
</template>

<script lang="ts" setup>

	import { ref, reactive } from 'vue'
	import BaseLayout from './BaseLayout.vue';
	const parentMsg = ref('parentMsg')

</script>
<style lang="scss"></style>

BaseLayout.vue

<template>
    <div>
        <slot :text="greetMsg" :count="1"></slot>

        <br/>
        
        <slot name="title" v-bind="person" v-for="person in persons"></slot>
    </div>
</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    const greetMsg = ref('打招呼')

    const persons = [{name:'zzhua',age:18},{name:'zj',age:22}]
</script>

<style lang="scss"></style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云桌面技术初识:VDI,IDV,VOI,RDS

VDI&#xff08;Virtual Desktop Infrastucture&#xff0c;虚拟桌面架构&#xff09;&#xff0c;俗称虚拟云桌面 VDI构架采用的“集中存储、集中运算”构架&#xff0c;所有的桌面以虚拟机的方式运行在服务器硬件虚拟化层上&#xff0c;桌面以图像传输的方式发送到客户端。 …

序列化与反序列化概念

序列化是指将对象的状态信息转换为可以存储或传输的形式的过程。 在Java中创建的对象&#xff0c;只要没有被回收就可以被复用&#xff0c;但是&#xff0c;创建的这些对象都是存在于JVM的堆内存中&#xff0c;JVM处于运行状态时候&#xff0c;这些对象可以复用&#xff0c; 但…

taobao.item.delete( 删除单条商品 )

&#xffe5;开放平台免费API必须用户授权 删除单条商品 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 公共响应参数: 请求参数 响应参数 点击获取key和secret 请求示例 TaobaoClient client new DefaultTaobaoClient(url, appkey, s…

【深一点学习】自己实现一下卷积和池化操作,理解超参数意义,理清数学计算方式

二维卷积层 卷积神经网络&#xff08;convolutional neural network&#xff09;是含有卷积层&#xff08;convolutional layer&#xff09;的神经网络。本章中介绍的卷积神经网络均使用最常见的二维卷积层。它有高和宽两个空间维度&#xff0c;常用来处理图像数据。 二维互相…

Python、JavaScript、C、C++和Java可视化代码执行工具

Python、JavaScrip、C、C和Java可视化代码执行工具 该工具通过可视化代码执行来帮助您学习Python、JavaScript、C、C和Java编程。可在可视化区动态展示执行过程中的调用栈、相关变量以及对应的变量值。https://pythontutor.com/ 下面以执行下面python这段代码为例 class MyCla…

9万字“联、管、用”三位一体雪亮工程整体建设方案

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用。部分资料内容&#xff1a; 1、 总体设计方案 围绕《公共安全视频监控建设联网应用”十三五”规划方案》中的总体架构和一总两分结构要求的基础上&#xff0c;项目将以“加强社会公共安全管理&#xff0c;提高…

leetcode打卡-贪心算法

455.分发饼干 leetcode题目链接&#xff1a;https://leetcode.cn/problems/assign-cookies leetcode AC记录&#xff1a; 代码如下&#xff1a; public int findContentChildren(int[] g, int[] s) {Arrays.sort(g);Arrays.sort(s);int res 0;int sIndex 0;int gIndex 0…

Kafka生产者的粘性分区算法

分区算法分类 kafka在生产者投递消息时&#xff0c;会根据是否有key采取不用策略来获取分区。 存在key时会根据key计算一个hash值&#xff0c;然后采用hash%分区数的方式获取对应的分区。 而不存在key时采用随机算法选取分区&#xff0c;然后将所有的消息封装到这个batch上直…

2023/3/5 Vue学习笔记 - 生命周期函数探究-2

1 beforeCreated 在组件实例初始化完成之后立即调用。会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。 组件的组件实例初始化动作&#xff1a;初始化一个空的Vue实例对象&#xff0c;此时&#xff0c;这个对象身上只有一个默认的声明周期函…

Eureka注册中心快速入门

一、提供者与消费者**服务提供者&#xff1a;**一次业务中&#xff0c;被其他微服务调用的服务。&#xff08;提供接口给其他微服务&#xff09;**服务消费者&#xff1a;**一次业务中&#xff0c;调用其他微服务的服务。&#xff08;调用其它微服务提供的接口&#xff09;比如…

如何分辨on-policy和off-policy

on-policy的定义&#xff1a;behavior policy和target-policy相同的是on-policy&#xff0c;不同的是off-policy。 behavior policy&#xff1a;采样数据的策略&#xff0c;影响的是采样出来s,a的分布。 target policy&#xff1a;就是被不断迭代修改的策略。 如果是基于深度…

JavaSE学习笔记总结day18(完结!!!)

今日内容 零、 复习昨日 一、作业 二、进程与线程 三、创建线程 四、线程的API 五、线程状态 六、线程同步 零、 复习昨日 晨考 一、作业 见答案 二、进程与线程[了解] 一个进程就是一个应用程序,进程包含线程 一个进程至少包含一个线程,大部分都是有多条线程在执行任务(多线…

Win系统蓝牙设备频繁卡顿/断连 - 解决方案

Win系统蓝牙设备频繁卡顿/断连 - 解决方案前言常见网卡Intel无线网卡&#xff08;推荐&#xff09;Realtek无线网卡总结查看本机网卡解决方案更新驱动更换网卡&#xff08;推荐&#xff09;前言 无线网卡有2个模块&#xff0c;一个是WiFi&#xff0c;一个是蓝牙&#xff0c;因…

Kubernetes之存储管理(下)

动态卷供应 上篇文章讲述的持久性存储&#xff0c;是先创建pv&#xff0c;然后才能创建pvc。如果不同的命名空间里同时要创建不同的pvc&#xff0c;那么就需要提前创建好pv&#xff0c;这样才能为pvc提供存储。但是这种方式太过繁琐&#xff0c;可以使用storageClass&#xff…

yolov5算法,训练模型,模型检测

嘟嘟嘟嘟&#xff01;工作需要&#xff0c;所以学习了下yolov5算法。是干什么的呢&#xff1f; 通俗来说&#xff0c;可以将它看做是一个小孩儿&#xff0c;通过成年人&#xff08;开发人员&#xff09;提供的大量图片的学习&#xff0c;让自己知道我看到的哪些场景需要提醒给成…

MySQL底层存储B-Tree和B+Tree原理分析

1.B-Tree的原理分析 &#xff08;1&#xff09;什么是B-Tree B-树&#xff0c;全称是 Balanced Tree&#xff0c;是一种多路平衡查找树。 一个节点包括多个key (数量看业务)&#xff0c;具有M阶的B树&#xff0c;每个节点最多有M-1个Key。 节点的key元素个数就是指这个节点能…

Andorid:关于Binder几个面试问题

1.简单介绍下binderbinder是一种进程间通讯的机制进程间通讯需要了解用户空间和内核空间每个进程拥有自己的独立虚拟机&#xff0c;系统为他们分配的地址空间都是互相隔离的。如两个进程需要进行通讯&#xff0c;则需要使用到内核空间做载体&#xff0c;内核空间是所有进程共享…

FL2440(S3C2440A 芯片) 开发板开发笔记

FL2440(S3C2440A 芯片) 开发板开发笔记 开发板的拨码开关指南&#xff1a; FL2440 改 vnfg 飞凌嵌入式 www. witech. com. cn 09. 8. 22 1 开发板使用手册 version4. 0 FL2440 保定飞凌嵌入式技术有限公司 网站&#xff1a;http: //www. witech. com. cn http: //www. he…

动态规划之买卖股票问题

&#x1f308;&#x1f308;&#x1f604;&#x1f604; 欢迎来到茶色岛独家岛屿&#xff0c;本期将为大家揭晓动态规划之买卖股票问题 &#xff0c;做好准备了么&#xff0c;那么开始吧。 &#x1f332;&#x1f332;&#x1f434;&#x1f434; 动态规划算法本质上就是穷举…

synchronized底层

Monitor概念一、Java对象头二、Monitor2.1、Monitor—工作原理2.2、Monitor工作原理—字节码角度2.2、synchronized进阶原理&#xff08;优化&#xff09;2.3、synchronized优化原理——轻量级锁2.4、synchronized优化原理——锁膨胀2.5、synchronized优化原理——自旋优化2.6、…