掌握Vue插槽:创建灵活且可复用的组件

引言

插槽(Slots)是实现组件化的一个强大工具,它允许开发者在组件内部定义可替换的内容区域

插槽的主要作用包括:

  • 内容分发:允许开发者在组件内部定义内容的“插槽”,然后在使用组件时,通过插槽传递自定义内容。
  • 组件复用:通过插槽,开发者可以创建可复用的组件,同时允许用户自定义组件的某些部分,从而提高开发效率和组件的灵活性。
  • 动态内容展示:插槽使得组件能够根据不同的使用场景展示不同的内容,增强了组件的动态性和可配置性。

Vue插槽的定义和类型

Vue插槽主要分为两种类型:具名插槽(Named Slots)和作用域插槽(Scoped Slots)。

1.具名插槽

  • 具名插槽允许开发者为组件内的插槽指定一个名称,父组件可以通过这个名称向子组件传递内容。
  • 在子组件中,使用<slot>标签并指定一个name属性来定义具名插槽。
  • 父组件在使用子组件时,通过<template>标签的slot属性指定要插入的内容应该放在哪个具名插槽中。

2.作用域插槽

  • 作用域插槽允许子组件向父组件传递数据,使得父组件可以根据子组件提供的数据来决定如何渲染插槽内容。
  • 在子组件中,使用<slot>标签并绑定一个对象到slot-scope属性(在Vue 2.5.0+中,slot-scope属性被v-slot指令替代)。
  • 父组件在使用子组件时,通过<template>标签的v-slot指令接收子组件传递的数据,并根据这些数据来渲染插槽内容。
插槽的工作原理和使用场景

插槽的工作原理基于Vue.js的虚拟DOM和组件系统。当Vue.js渲染一个组件时,它会检查组件的模板中是否有插槽定义。如果有,Vue.js会将父组件传递的内容插入到这些插槽中。如果父组件没有提供任何内容,插槽可以显示默认内容。

使用场景包括:

  • 自定义布局:当组件需要在特定位置展示自定义内容时,可以使用具名插槽。
  • 动态内容展示:当组件需要根据传入的数据动态渲染内容时,可以使用作用域插槽。
  • 内容分发:当组件需要将内容分发到多个位置时,可以使用多个具名插槽。

示例

具名插槽示例(就是按照名字来决定内容往哪渲染)

组件一多,普通的插槽就不好用了,假如你养了十条狗,不可能条条都叫旺财吧,我们可以用

name="???" 和 v-slot=???来给这几条狗,哦不,组件起名字

假设我们有一个BaseLayout组件,它有一个头部、一个侧边栏和一个内容区域。我们希望在使用BaseLayout时,能够自定义这三个区域的内容。

<!-- BaseLayout.vue -->
<template><div class="base-layout"><header><slot name="header"></slot></header><aside><slot name="sidebar"></slot></aside><main><slot></slot></main></div>
</template>

在父组件中,我们可以这样使用BaseLayout组件,并指定不同插槽的内容:

<!-- ParentComponent.vue -->
<template><BaseLayout><template v-slot:header><h1>我的标题</h1></template><template v-slot:sidebar><ul><li>导航项1</li><li>导航项2</li></ul></template><template v-slot:default><p>这里是内容区域。</p></template></BaseLayout>
</template>

作用域插槽示例(其实就是通过插槽子传父)

作用域插槽允许子组件向父组件传递数据,使得父组件可以根据子组件提供的数据来定制化地渲染插槽内容

假设我们有一个ProductList组件,它展示了一个产品列表。我们希望在父组件中能够根据产品的价格来决定如何显示每个产品。

<!-- ProductList.vue -->
<template><div class="product-list"><div v-for="product in products" :key="product.id"><slot :name="product.id" :product="product"><!-- 默认插槽内容 --><p>{{ product.name }}</p></slot></div></div>
</template>

在父组件中,我们可以这样使用ProductList组件,并根据产品的价格来定制插槽内容:

<!-- ParentComponent.vue -->
<template><ProductList><template v-slot:[productId]="{ product }"><div v-if="product.price < 100"><p>价格低于100元: {{ product.name }}</p></div><div v-else><p>价格高于或等于100元: {{ product.name }}</p></div></template></ProductList>
</template>

在这个例子中,我们使用了动态插槽名(v-slot:[productId]),它会根据productId的值来匹配对应的插槽。同时,我们通过插槽的v-slot指令接收了product对象,这样就可以在父组件中访问到子组件传递的数据,并根据这些数据来定制插槽内容。

讲人话:子组件形式是  :item = "item"  发送,父组件是  v-slot=“obj”  ,然后子组件的item就传到了父组件叫 obj

动态和条件渲染插槽

在Vue.js中,插槽的动态和条件渲染允许开发者根据特定条件来决定是否渲染某个插槽,或者渲染哪个插槽。这可以通过使用v-ifv-show指令来实现。下面是一个示例,展示如何根据条件动态渲染插槽。

示例:

子组件(ChildComponent.vue)
<template><div class="child-component"><!-- 使用v-if指令来控制插槽的渲染 --><slot v-if="showSlot" name="dynamicSlot"><p>这是动态插槽的默认内容</p></slot></div>
</template><script>
export default {data() {return {showSlot: true // 控制插槽是否显示的变量};}
};
</script>
父组件(ParentComponent.vue)
<template><div class="parent-component"><!-- 使用子组件 --><ChildComponent><!-- 使用v-slot指令接收插槽内容 --><template v-slot:dynamicSlot><!-- 根据条件动态渲染插槽内容 --><p v-if="shouldShowSlotContent">这是父组件提供的动态插槽内容</p></template></ChildComponent></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {shouldShowSlotContent: true // 控制是否显示插槽内容的变量};}
};
</script>

在这个例子中,ChildComponent定义了一个名为dynamicSlot的具名插槽。通过v-if指令,我们控制了这个插槽是否渲染。如果showSlot变量为true,则插槽会被渲染;否则,插槽不会显示。

高级用法和注意事项(扩展内容,按兴趣掌握就好了)

具名插槽的高级用法和注意事项

1.动态插槽名

  • Vue 2.6+ 支持动态插槽名,允许你使用表达式来绑定插槽名。
  • 例如:<template v-slot:[dynamicSlotName]>,其中dynamicSlotName是一个响应式数据。

2.默认插槽的简写

  • 在Vue 2.6+中,可以使用v-slot的简写形式#,例如:<template #default>

3.插槽的命名约定

  • 尽管插槽可以使用任何名称,但建议使用有意义的名称,以提高代码的可读性和可维护性。

4.插槽的默认内容

  • 插槽可以有默认内容,当父组件没有提供任何内容时,将显示默认内容。
  • //子组件<slot name="default"><!-- 默认内容 --><p>这是默认内容,如果父组件没有提供内容,则会显示这段文字。</p></slot>//父组件
    <template v-slot:default><p>这是父组件提供的内容,将覆盖子组件的默认内容。</p>
    </template>

5.插槽的嵌套

  • 插槽可以嵌套使用,允许在父组件中对子组件的插槽进行进一步的定制。

作用域插槽的高级用法和注意事项

1.作用域插槽的解构

  • 在Vue 2.6+中,可以使用解构赋值来接收作用域插槽的属性,例如:v-slot="{ item }"

2.作用域插槽的嵌套

  • 作用域插槽可以嵌套使用,允许父组件对子组件提供的数据进行进一步的处理。

3.作用域插槽的性能考虑

  • 当使用作用域插槽时,Vue需要在父组件中渲染子组件的插槽内容。如果插槽内容非常复杂或频繁变化,可能会影响性能。

4.作用域插槽的可访问性

  • 由于作用域插槽允许父组件访问子组件的数据,因此需要确保这些数据的可访问性不会泄露敏感信息。

总结

Vue.js的插槽(Slots)是实现组件化的一个强大工具,它允许开发者在组件内部定义可替换的内容区域。

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

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

相关文章

隔离级别-隔离级别中的锁协议、隔离级别类型、隔离级别的设置、隔离级别应用

一、引言 1、DBMS除了采用严格的两阶段封锁协议来保证并发事务的可串行化&#xff0c;实现事务的隔离性&#xff0c;也可允许用户选择一个可以保证应用程序正确执行并且能够使并发度最大的隔离性等级 2、通常用隔离级别来描述隔离性等级&#xff0c;以下将主要介绍ANSI 92标准…

上新:NFTScan 正式上线 Bitcoin-Runes 浏览器!

近日&#xff0c;NFTScan 团队正式对外发布了 Bitcoin-Runes 浏览器&#xff0c;将为 Runes 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。Runes 协议的主要目的是定义一种在比特币网络上进行符号化资产交换的方式。它使用 Rune 作为符号化资产的单位&#xf…

【昇思25天学习打卡营打卡指南-第十九天】基于MobileNetv2的垃圾分类

CycleGAN图像风格迁移互换 模型介绍 模型简介 CycleGAN(Cycle Generative Adversarial Network) 即循环对抗生成网络&#xff0c;来自论文 Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks 。该模型实现了一种在没有配对示例的情况下学习…

数据结构学习笔记-十大排序算法

1.插入排序 直接插入排序 //直接插入排序 void InsertSort(int A[], int n){int i,j,temp;for(i1;i<n;i) //将各元素插入已排好序的序列中if(A[i]<A[i-1]){ //若A[i]关键字小于前驱tempA[i]; //用temp暂存A[i]for(ji-1;j>0 && A[j]>temp;--j) …

【大模型LLM面试合集】大语言模型基础_NLP面试题

NLP面试题 1.BERT 1.1 基础知识 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是谷歌提出&#xff0c;作为一个Word2Vec的替代者&#xff0c;其在NLP领域的11个方向大幅刷新了精度&#xff0c;可以说是近年来自残差网络最优突破性的…

从零搭建Prometheus到Grafana告警推送

目录 一、Prometheus源码安装和动态更新配置 二、Prometheus操作面板和常见配置 三、Prometheus常用监控组件exporter配置 3.1 exporter是什么 3.2 有哪些exporter 3.3 exporter怎么用 3.4 实战 node_exporter ​3.5 其它exporter都怎么用 四、Promethus整合新版Sprin…

算法mq 交互通用校验模块设计

背景 当前与算法交互均通过rocketMQ异步交互&#xff0c;绝大部分场景一条请求mq消息应对应一条返回mq&#xff0c;但由于各种原因&#xff08;消息积压、程序bug&#xff09;&#xff0c;可能会导致返回mq超时未返回或者消息丢失。工程侧针对一些重要场景 case by case的通过…

MySql数据库常用指令合集

MySql数据库常用指令合集 一、创建数据库db11.创建表 字段---表头 student_no,username,sex2.新增单条插入多条插入3.删除4.更新5.查询5.1.查询该表全部信息5.2.查询该表中username&#xff0c;并且要求名字为zhangsan性别女&#xff0c;还可以用&#xff08;or&#xff09; 6.…

卷积神经网络有哪些应用场景

卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;简称CNN&#xff09;的应用场景非常广泛&#xff0c;尤其是在处理具有网格结构的数据&#xff08;如图像、视频&#xff09;时表现出色。以下是一些主要的应用场景&#xff1a; 1. 图像识别与分类 图像分类…

基础权限存储

一丶要求 建立用户组shengcan&#xff0c;其id为 2000建立用户组 caiwu&#xff0c;其id 为2001建立用户组 jishu&#xff0c;其id 为 2002建立目录/sc,此目录是 shengchan 部门的存储目录&#xff0c;只能被 shengchan 组的成员操作4.其他用户没有任何权限建立目录/cw,此目录…

GIT 使用相关技巧记录

目录 1、commit 用户信息变更 全局用户信息&#xff08;没有特殊配置的情况下默认直接用全局信息&#xff09; 特定仓库用户信息&#xff08;只针对于当前项目&#xff09; 方法一&#xff1a;修改config文件 方法二&#xff1a;命令方式 2、idea同一代码推向多个远端仓库…

Ubuntu编译 OSG

目录 一、安装步骤 二、配置 1、数据文件配置 2、OSG环境变量配置 一、安装步骤 在Ubuntu上安装OSG(OpenSceneGraph),你可以按照以下步骤操作: 打开终端,更新你的包管理器的包列表: sudo apt update 安装必要的依赖库 sudo apt install libglu1-mesa-dev freeglu…

Java -- 实现MD5加密/加盐

目录 1. 加密的引出2. MD5介绍3. 解决MD5不可解密方法4. 实现加密解密4.1 加密4.2 验证密码 1. 加密的引出 在MySQL数据库中&#xff0c;一般都需要把密码、身份证、电话号码等信息进行加密&#xff0c;以确保数据的安全性。如果使用明文来存储&#xff0c;当数据库被入侵的时…

8.做pwn题的大致流程

file <文件名> 判断是32还是64位&#xff0c;用对应工具分析&#xff08;比如ida&#xff0c;可以直接把文件拖到对应图标上&#xff09; ida中如果没找到main函数就找start函数从而找到main函数起始地址 两种分析方式&#xff1a; 静态分析ida 动态分析gdb 如果发现…

第七篇——攻谋篇:兵法第一原则——兵力原则,以多胜少

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 微观层面上&#xff0c;也有很多值得深度思考的问题 二、思路&方案 …

CV- 人工智能-深度学习基础知识

一, 深度学习基础知识 1,什么是深度学习?机器学习是实现人工智能的一种途径,深度学习是机器学习的一个子集,也就是说深度学习是实现机器学习的一种方法。2, 传统机器学习算术依赖人工设计特征,并进行特征提取,而深度学习方法不需要人工,而是依赖算法自动提取特征。深度…

一个SQL查询出表结构

select table_schema as “数据库”, table_name as “表名”, table_rows as “记录数”, truncate(data_length / 1024 / 1024,2) as “数据容量(MB)”, truncate(index_length / 1024 / 1024, 2) as “索引容量” from information_schema.tables where table_schema ‘数据…

MuLan:模仿人类画家的多对象图像生成

在图像生成领域&#xff0c;处理包含多个对象及其空间关系、相对大小、重叠和属性绑定的复杂提示时&#xff0c;现有的文本到图像模型仍面临挑战&#xff1a;当文本提示中包含多个对象&#xff0c;并且这些对象之间存在特定的空间关系时&#xff0c;现有模型往往难以准确地捕捉…

6.pwn Linux保护机制

保护机制 CANARY NX ASLR PIE RELRO 回顾 栈的作用为存储函数调用相关信息以及函数的局部变量 这些局部变量通常为数组或者输入的缓冲区(buf)。 而函数调用相关的信息&#xff0c;主要是返回地址和栈底指针(rbp) CANARY 看到程序里readfsqword&#xff08;0x28u&…

Spring 框架的基础知识

Spring 框架是由于软件开发的复杂性而创建的&#xff0c;Spring 使用的是基本的 JavaBean 来完成以前只可能由 EJB 完成的事。从简单性、可测性和松耦合性角度而言&#xff0c;绝大部分Java 应用都可以用 Spring。 1、控制反转&#xff08;Inversion of Control, IOC&#xff0…