VUE之---slot插槽

什么是插槽

slot 【插槽】, 是 Vue 的内容分发机制, 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot子组件的一个模板标签元素, 而这一个标签元素是否显示, 以及怎么显示是由父组件决定的。

VUE中slot【插槽】的分类与应用

插槽有三种:默认插槽具名插槽作用域插槽

(1)默认插槽

语法:<slot></slot>

示例

在子组件中定义一个默认插槽

<template><div><h2>{{ title }}</h2><slot></slot></div>
</template>

在开发中我们经常使用到组件之间的传值,但很多情况涉及到的都是数据属性的传值,现在如果是这种情况:想让父组件定义的 p 标签传给子组件并显示,可以在子组件中定义一个默认插槽

<template><div class="about"><h1>This is an Parent page</h1><children><!-- 一个p标签的dom结构 --><p>子组件标签之间</p></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>

 展示效果

(2)具名卡槽 

在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将根据 name 来填充对应的内容。这种有name属性的卡槽就是具名卡槽。

为具名插槽提供内容:

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式指定元素需要放在哪个插槽中。

【语法】<template v-slot:插槽的name> 需要向插槽中放入的内容 </template>

具名插槽的简写形式:

跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header

【语法】<template #插槽的name> 需要向插槽中放入的内容 </template>

【注】

  • 使用 v-slot 指令指定元素放在哪个插槽中,必须配合<template> 元素,且一个<template> 元素只能对应一个预留的插槽,即不能多个<template> 元素都使用 v-slot 指令指定相同的插槽。
  • 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
  • 使用 slot 属性指定元素放置的插槽:slot="插槽的name",slot 属性可以直接写在元素标签上,即 slot 属性不用必须与<template> 元素配合,且不同的标签可以使用 slot 属性指定相同的插槽,使用 slot 属性指定了相同的插槽都会被放入一个插槽中,后面的元素会被追加在前面放入插槽的元素后。

示例

在子组件中,定义两个具名插槽:

<template><div><h3>Com 组件</h3><slot name="header"></slot><slot name="bottom"></slot></div>
</template><script>
export default {name: 'Com'
}
</script>

父组件示例代码

<template><div><h1>App 组件</h1><Com><!-- 指定需要向子组件的插槽区域放入的元素 --><!-- 需要放入插槽的元素写在组件标签内 --><!-- <div>插槽的内容</div> --><template v-slot:header><div>头部区域</div></template><template v-slot:default><div>默认区域</div></template><template v-slot:bottom><div>bottom区域</div></template></Com></div>
</template>
<script>
import Com from './Com.vue'
export default {name: 'App',components: { Com }
}
</script>

(3)作用域插槽 

在封装组件的过程中,可以为预留的<slot> 插槽绑定 props 数据,这种带有 props 数据的<slot> 叫做“作用域插槽”。

作用域插槽,要显示的数据已经在组件中,以什么样的样式显示数据(用什么标签和标签的样式),可以由组件的使用者进行指定

【语法】<slot :自定义的name=data中的属性或对象></slot>

:为作用域插槽指定插槽内的元素必须使用 <template> 标签。

获取插槽绑定 props 数据的方法:
1.scope="接收的变量名":<template scope="接收的变量名">
2.slot-scope="接收的变量名":<template slot-scope="接收的变量名">
3.v-slot:插槽名="接收的变量名":<template v-slot:插槽名="接收的变量名">

子组件示例

<template><div><h3>Com 组件</h3><!-- 为组件的使用者预留的区域 --><!-- :infomation="info" 未来要进行渲染在插槽位置的数据 --><!-- 怎么样渲染数据由组件的使用者决定 --><slot :infomation="info" :msg="msg"></slot></div>
</template><script>
export default {name: 'Com',data() {return {info: { name: 'zs', age: 23 },msg: 'hello vue'}}
}
</script>

父组件示例

<template><div><h1>App 组件</h1><Com><!-- 指定需要向子组件的插槽区域放入的元素 --><!-- 需要放入插槽的元素写在组件标签内 --><!-- val 接收组件中要在插槽位置渲染的数据 --><!-- val 组件通过 props 向插槽中传入的数据 --><template #default="val"> {{ val }} </template></Com></div>
</template><script>
import Com from './Com.vue'export default {name: 'App',components: { Com }
}
</script>

此文章借鉴了一下博主的优秀文章:

原文链接

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

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

相关文章

Postman的高级功能

Postman是一款功能强大的API测试工具&#xff0c;它提供了许多高级功能来帮助开发者和测试人员更高效地进行API测试和开发。以下是Postman在API测试中的一些高级功能&#xff1a; 1. 集合和文件夹 集合&#xff1a;用于组织相关的API请求。文件夹&#xff1a;在集合内部进一步…

Huffman编码和译码

Huffman编码(Huffman Coding),又称霍夫曼编码或赫夫曼编码,是一种用于无损数据压缩的熵编码(权编码)算法,由大卫霍夫曼(David A. Huffman)在1952年发明。Huffman编码属于可变字长编码(VLC)的一种,其基本思想是根据字符在数据中出现的频率来分配不同长度的编码,出现…

自己开发软件实现网站抓取m3u8链接

几天前一个同学说想下载一个网站的视频找不到连接&#xff0c;问我有没有什么办法,网站抓取m3u8链接 网页抓取m3u8链接。当时一听觉得应该简单&#xff0c;于是说我抽空看看。然后就分析目标网页&#xff0c;试图从网页源码里找出连接&#xff0c;有的源代码直接有,但是有的没有…

(二)C++之类与对象

一.类的申明 class 类名 { private: 私有的数据和成员函数; public: 公用的数据和成员函数; protected: 保护的数据和成员函数 };二.类的成员函数 构造函数&#xff08;类的初始化&#xff0c;创建类时自动调用&#xff1b;初始化表,this指针&#xff09; 默认构造函数 A();…

语法糖的setup和onMounted

遇到的问题&#xff1a;利用:style绑定响应式变量并结合css来动态更换颜色&#xff0c;绑定的响应式变量无法正常渲染 结论&#xff1a;本人将:style绑定响应式变量的值写在onMounted里面了&#xff0c;一个大失误&#xff0c;记录一下&#xff0c;利用setup语法糖默认初始化阶…

Redisson常用的数据结构及应用场景

Redisson 提供了一系列高级数据结构&#xff0c;这些数据结构封装了 Redis 的原生数据类型&#xff0c;提供了 Java API 的便利性和分布式特性。以下是 Redisson 中一些常用的数据结构&#xff0c;场景还在不断完善中&#xff1a; RBucket&#xff1a;这是一个简单的键值对存储…

Java二十三种设计模式-代理模式模式(8/23)

代理模式&#xff1a;为对象访问提供灵活的控制 引言 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一个代替或占位符&#xff0c;以控制对它的访问。 基础知识&#xff0c;java设计模式总体来说设计模式分为三大类&#…

Carefree为高性能设计仿真及人工智能提供一站式解决方案

在当今数字化转型的浪潮中&#xff0c;程易科技作为行业领先的科技创新企业&#xff0c;致力于为客户提供高效、安全、智能的研发资源服务。我们的研发资源服务平台集成了四大核心组件——研发资源统一门户、HPC高性能计算平台、远程可视化前后处理平台以及AI人工智能及算法平台…

Qt 实战(7)元对象系统 | 7.6、Q_DECLARE_METATYPE详解

文章目录 一、Q_DECLARE_METATYPE详解1、基本概念2、使用场景3、使用方法4、示例&#xff1a;QVariant使用自定义类型5、总结 前言&#xff1a; 在Qt框架的C开发中&#xff0c;Q_DECLARE_METATYPE是一个重要且常用的宏&#xff0c;它扮演着连接自定义类型与Qt元对象系统&#x…

Varjo XR-4系列现已获得达索3DEXPERIENCE平台官方支持

近日&#xff0c;全球领先的工业虚拟和混合现实解决方案提供商Varjo宣布&#xff0c;Varjo XR-4系列现已获得达索3DEXPERIENCE平台的本地支持。这种集成为工程师和设计师带来了先进的虚拟和混合现实功能&#xff0c;他们可以通过沉浸式技术创新并简化他们的3D工作流程。 在达索…

【iOS】Tagged Pointer

目录 前言什么是Tagged Pointer&#xff1f;引入Tagged Pointer技术之前引入Tagged Pointer之后总结 Tagged Pointer原理&#xff08;TagData分析&#xff09;关闭数据混淆MacOS分析NSNumberNSString iOS分析 判断Tagged PointerTagged Pointer应用Tagged Pointer 注意点 Tagge…

堆的相关知识点

目录 大小堆 堆的实现 堆的创建 堆的销毁 交换 向上调整 向下调整 弹出首个元素 取出首个元素 判空 堆插入 大小堆 大堆&#xff1a;最上面的数字是最小的&#xff0c;越往下越大 小堆&#xff1a;最上面的数字是最大的&#xff0c;越往下越小 堆的复杂程度&#…

关于JMETER 压力测试工具安装 插入百万数据

‌jmeter 是 apache 公司基于 java 开发的一款开源压力测试工具&#xff0c;体积小&#xff0c;功能全&#xff0c;使用方便&#xff0c;是一个比较轻量级的测试工具&#xff0c;使用起来非常简 单。因为 jmeter 是 java 开发的&#xff0c;所以运行的时候必须先要安装 jdk 才可…

java设计模式:04-行为型模式-概览

行为型模式&#xff08;Behavioral Patterns&#xff09; 行为型模式&#xff08;Behavioral Patterns&#xff09;主要关注对象之间的通信和职责分配&#xff0c;旨在通过对象之间的相互作用来实现特定的功能。行为型模式不仅关注类和对象的结构&#xff0c;还关注它们之间的…

Qt绘制指南针(仪表盘绘制封装使用)

指南针是一种用来确定方向的工具。它由一个磁针制成&#xff0c;其一端被磁化&#xff0c;可以自由旋转。当放置在水平面上时&#xff0c;磁针会指向地球的磁北极。通过观察磁针的指向&#xff0c;我们可以确定地理北方的方向。本示例是在Qt中绘制一个指南针&#xff0c;通过继…

Android WebViewClient 的 `shouldOverrideUrlLoading` 方法

简介 在Android开发中&#xff0c;WebView是一个强大的工具&#xff0c;可以在你的应用中显示网页内容。了解 WebViewClient 中的 shouldOverrideUrlLoading 方法是至关重要的&#xff0c;因为这个方法允许你控制 URL 在 WebView 中的处理方式。 在本文中&#xff0c;我们将详…

S71200 - 笔记

1 S71200 0 ProfiNet - 2 PLC编程 01.如何零基础快速上手S7-1200_哔哩哔哩_bilibili 西门子S7-1200PLC编程设计学习视频&#xff0c;从入门开始讲解_哔哩哔哩_bilibili

Linux:进程信号(一.认识信号、信号的产生及深层理解、Term与Core)

上次结束了进程间通信的知识介绍&#xff1a;Linux&#xff1a;进程间通信&#xff08;二.共享内存详细讲解以及小项目使用和相关指令、消息队列、信号量 文章目录 1.认识信号进程看待信号方式 2.信号的产生2.1信号的处理的方式 --- signal()函数2.2kill指令产生信号2.3键盘产生…

最新快乐二级域名分发系统重置版v1.7源码-最新美化版+源码+可对接支付

源码简介&#xff1a; 最新快乐二级域名分发系统重置版v1.7源码&#xff0c;它是最新美化版源码可对接支付。 快乐二级域名分发系统重置版v1.7源码&#xff0c;简单快捷、功能强大的控制面板。系统稳定长久&#xff0c;控制面板没任何广告&#xff0c;让网站更实用方便。 最…

SeleniumBasic操作运行中的Chrome浏览器

今天用免费云服务器&#xff0c;三丰云&#xff0c;做操作浏览器自动化的VB程序。 如何自动化已经打开的浏览器&#xff1f; http://chromedriver.storage.googleapis.com/index.html 首先寻找驱动&#xff0c;最新的驱动只支持到浏览器114&#xff0c;我在网上下载的浏览器是9…