uni-app插槽(默认插槽,命名插槽,作用域插槽)

news2024/11/25 20:55:57

目录

什么是插槽?

基本概念

默认插槽

命名插槽

作用域插槽

场景一:子插槽向父组件传递一个字符串

场景二:子插槽向父组件传递对象

什么是插槽?

在 UniApp 中，插槽（Slot）是一种允许父组件向子组件特定位置插入HTML内容的方式。这种方式使得组件更加灵活，可以被复用在多种场景下，同时让父组件能够控制子组件的部分呈现内容。

基本概念

  1. 默认插槽：当没有特别指定插槽名称时，默认插槽就是指没有名字的插槽，可以在子组件中直接使用 <slot></slot> 标签来定义一个默认插槽的位置。

  2. 命名插槽：如果需要在子组件中定义多个插槽，可以通过 <slot name="slotName"></slot> 来定义具有特定名称的插槽。父组件则需要使用 <template v-slot:slotName>...</template> 或者更简洁的 <template #slotName>...</template> 来填充这些具名插槽。

  3. 作用域插槽：有时候父组件需要访问子组件的数据或属性，这时候就需要使用作用域插槽。子组件需要在 <slot> 标签中声明需要传递给父组件的数据，如 <slot name="slotName" :items="items"></slot>。父组件在使用这个插槽时，可以通过 v-slot:slotName="{ items }" 来接收这些数据，并根据这些数据进行渲染。

默认插槽

子插槽:<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

<template>
	<view class="all">
		<view class="header">
			头部
		</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">
			底部
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.header {
		position: sticky;
		top: 0;
		background-color: green;
		height: 100px;
		z-index: 1; // 确保头部始终在最上层
	}

	.main {
		height: 100px;
	}


	.footer {
		background-color: rosybrown;
		height: 120px;
	}
</style>

父组件:可以通过调用直接在组件内部编写代码,只适合一个插槽的场景

<template>
	<bdqn-header>
			661
	</bdqn-header>
</template>

<script setup>

</script>

<style scoped lang="scss">

</style>

命名插槽

子插槽:定义了多个插槽,会导致什么问题呢???

<template>
	<view class="all">
		<view class="header">
			<slot></slot>
		</view>
		<view class="main">
			<slot></slot>
		</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>

当出现多个插槽的时候会导致插入的时候,会在每个插槽都插入相同的数据

<template>
	<bdqn-header>
			661
	</bdqn-header>
</template>

调用插槽后会导致多个相同结构,使一个结构体重复出现多次

那么如何解决呢? 这个时候就可以用到命名插槽,在插槽标签slot中添加name属性,在调用的时候使用v-slot:名称来指定插槽插入,这样就可以避免一次性调用多个插槽,也可以简写为 #名称

<template>
	<view class="all">
		<view class="header">
			<slot name="header"></slot>
		</view>
		<view class="main">
			<slot name="main"></slot>
		</view>
		<view class="footer">
			<slot name="footerK"></slot>
		</view>
	</view>
</template>

调用子插槽的时候 通过添加 v-slot:名称 来指定插槽的位置

<template>
	<bdqn-header>
		<template v-slot:header>
			头部
		</template>
		<template v-slot:main>
			主体
		</template>
		<template v-slot:footerK>
			尾部
		</template>
	</bdqn-header>
</template>

<template>
	<bdqn-header>
		<template #header>
			头部
		</template>
		<template #main>
			主体
		</template>
		<template #footerK>
			尾部
		</template>
	</bdqn-header>
</template>

效果图:可以看见这样子就可以实现分别给多个插槽编写不同的实现代码

作用域插槽

作用域插槽就是可以让子插槽和父组件相互传值,相互访问

场景一:子插槽向父组件传递一个字符串

子插槽:通过name指定插槽的名称,定义一个text的变量并赋值 ( 语法 变量=值 )

<template>
	<view class="all">
		<view class="header">
			   <slot name="header" text="头部:我是一个字符串"></slot>
		</view>
		<view class="main">
		 <view>
		    <!-- 定义一个作用域插槽，并传递数据 -->
		    <slot name="main" text="局部:我是一个字符串"></slot>
		  </view>
		</view>
		<view class="footer">
			底部
		</view>
	</view>
</template>

父组件:

  • 通过 v-slot:header="{ text }" 定义了一个名为 header 的作用域插槽。
  • text 是从子组件传递过来的数据。
  • 在模板中通过 {{ text }} 显示传递过来的文本。
<template>
	<!-- 使用自定义组件 bdqn-header，并为其定义两个作用域插槽：header 和 main -->
	<bdqn-header>
		<!-- 定义 header 作用域插槽，并访问子组件传递的 text 数据 -->
		<template v-slot:header="{ text }">
			<view>{{ text }}</view>
		</template>

		<!-- 定义 main 作用域插槽，并访问子组件传递的 text 数据 -->
		<template v-slot:main="{ text }">
			<view>{{ text }}</view>
		</template>
	</bdqn-header>
</template>

运行效果

场景二:子插槽向父组件传递对象

子插槽:向父组件传递了一个items对象( 语法 :名称="传递的对象" )

<template>
	<view class="all">
		<!-- 头部区域 -->
		<view class="header">
			<!-- 使用插槽传递头部内容，提供默认文本 -->
			<slot name="header" text="头部:我是一个字符串"></slot>
		</view>
		<!-- 主要内容区域 -->
		<view class="main">
			<!-- 包裹一个view以便于统一管理插槽内容 -->
			<slot name="main" :items="items"></slot>
		</view>
		<!-- 底部区域，直接输出底部内容 -->
		<view class="footer">
			底部
		</view>
	</view>
</template>

<script setup>
	// 导入Vue的响应式函数ref
	import {
		ref
	} from 'vue';

	// 定义一个响应式的items数组，包含姓名和年龄信息
	var items = ref([{
		name: '张三',
		age: 18
	}, {
		name: '李四',
		age: 19
	}, {
		name: '王五',
		age: 25
	}])
</script>

<style lang="scss" scoped>
	.header {
		position: sticky;
		top: 0;
		background-color: green;
		height: 100px;
		z-index: 1; // 确保头部始终在最上层
	}

	.main {
		height: 100px;
	}


	.footer {
		background-color: rosybrown;
		height: 120px;
	}
</style>

父组件: 通过插槽接收子插槽传递的对象 ( 语法  #main="{items}"  ) 

  • 通过 #main 插槽展示列表项。
  • #main表示插槽指定的名称(name名称)
  • "{items}" 表示传递的对象,使用{}包裹
<template>
	<!-- 使用自定义组件bdqn-header来构建页面布局 -->
	<bdqn-header>
		<!-- 通过header插槽自定义头部内容 -->
		<template v-slot:header="{ text }">
			<view>{{ text }}</view>
		</template>

		<!-- 通过main插槽展示主体内容，通常用于列表展示 -->
		<template #main="{items}">
			<view v-for="item in items">
				{{item.name}}&nbsp;{{item.age}}
			</view>
		</template>
	</bdqn-header>
</template>

执行的结果

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

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

相关文章

ROS 2 Jazzy和QT组合开发教程

ROS 2 Jazzy和QT组合开发教程

ROS2 Jazzy和QT组合开发教程 ROS2 和 Qt 组合开发是一个强大且灵活的组合&#xff0c;可以用来构建具有 GUI 的机器人应用程序。这个组合让你能够将 Qt 的图形界面与 ROS 2 的分布式通信功能结合在一起&#xff0c;实现数据的展示、机器人控制、调试等功能。 环境如下&#x…
阅读更多...
掌握人事管理，这张报表帮你轻松搞定

掌握人事管理，这张报表帮你轻松搞定

在人事管理中&#xff0c;数据分析的重要性不言而喻。无论是了解员工的整体情况&#xff0c;还是洞察人才流失的原因&#xff0c;数据都能为我们提供有力的支持。但是&#xff0c;面对海量的数据&#xff0c;很多HR都会感到不知所措。那么&#xff0c;如何通过一张报表解决所有…
阅读更多...
数字化转型升级探索（三）

数字化转型升级探索（三）

在数字化转型升级的探索过程中&#xff0c;我们将通过深入应用人工智能、物联网、大数据和云计算等技术&#xff0c;全面重塑业务流程和运营模式&#xff0c;推动信息流、业务流和价值流的高度融合&#xff0c;实现从传统手工操作到智能自动化的全方位升级&#xff0c;提升业务…
阅读更多...
【Python报错已解决】`SyntaxError`：`invalid syntax`

【Python报错已解决】`SyntaxError`：`invalid syntax`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 在Python编程中&#xff0c;SyntaxError是最常见的错误类型之一&#xff0c;它表示代码中存在语法错误。本文将探讨一个具…
阅读更多...
★ 算法OJ题 ★ 力扣202 - 快乐数

★ 算法OJ题 ★ 力扣202 - 快乐数

Ciallo&#xff5e;(∠・ω< )⌒☆ ~ 今天&#xff0c;我将和大家一起做一道双指针算法题--快乐数~ 目录 一 题目 二 算法解析 三 编写算法 一 题目 202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 二 算法解析 题⽬告诉我们&#xff0c;当我们不断重复操作…
阅读更多...
数字化转型升级探索（四）

数字化转型升级探索（四）

在数字化转型升级的探索中&#xff0c;我们将致力于通过整合先进的技术手段&#xff0c;如人工智能、区块链、大数据和云计算&#xff0c;全面改造传统业务模式&#xff0c;实现智能化运营和数据驱动决策&#xff0c;从而提高企业的效率与灵活性&#xff1b;通过实施全新的数字…
阅读更多...
【微处理器系统原理与设计应用入门】典型的微处理器及系统

【微处理器系统原理与设计应用入门】典型的微处理器及系统

一. 基于微处理器的系统结构 首先明确什么是处理器&#xff1f; 我们在设计一个系统完成一个功能时&#xff0c;必不可少的一个环节就是信息处理&#xff0c;我们人脑处理信息是依靠神经系统传递神经冲动&#xff0c;而对于机器而言需要指令来完成信息处理&#xff0c;所以一…
阅读更多...
Golang 小项目(3)

Golang 小项目(3)

Golang 小项目(3) 前言 本项目适合 Golang 初学者，通过简单的项目实践来加深对 Golang 的基本语法和 Web 开发的理解。 前往 torna.top 免费查阅 项目结构 D:. ├─ go.mod ├─ go.sum │ ├─cmd │ └─main │ main.go │ └─pkg├─config│ app.go│…
阅读更多...
CSDN的技术人员真牛，3分钟定位到问题所在

CSDN的技术人员真牛，3分钟定位到问题所在

加密社 昨天晚上&#xff0c;我为了方便写文后一键同步至我的其他账号&#xff0c;安装了个浏览器插件 然后今天一来&#xff0c;我发现csdn的内容管理-创作者平台打不开了 我试了各种办法&#xff0c; 包括清缓存&#xff0c;换浏览器重试&#xff0c;换网络&#xff0c;重…
阅读更多...
14%电抗器可以过滤几次谐波

14%电抗器可以过滤几次谐波

14%电抗器&#xff08;也称为14%阻抗电抗器&#xff09;是一种用于限制电流谐波的设备&#xff0c;主要通过增加系统的阻抗来减少谐波电流的幅度。它的“14%”表示电抗器的阻抗相对于电力变压器的额定阻抗的比例&#xff0c;即电抗器的阻抗是变压器阻抗的14%。 一、谐波过滤能力…
阅读更多...
【递归深搜之记忆化搜索算法】

【递归深搜之记忆化搜索算法】

1. 斐波那契数 解法一&#xff1a;递归 class Solution { public:int fib(int n) {return dfs(n);}int dfs(int n){if(n 0 || n 1)return n;return dfs(n - 1) dfs(n - 2);} }; 解法二&#xff1a;记忆化搜索 class Solution {int nums[31]; // 备忘录 public:int fib(int …
阅读更多...
carbonyl浏览器使用

carbonyl浏览器使用

仓库 carbonyl上提供了两种在线方式安装&#xff0c;一是docker方式 $ docker run --rm -ti fathyb/carbonyl https://youtube.com另一种是 $ npm install --global carbonyl $ carbonyl https://github.com此外还提供了mac和linux的二进制包&#xff0c;可直接下载运行。 二…
阅读更多...
[BFS广度优先搜索] 迷宫

[BFS广度优先搜索] 迷宫

描述 给定一个仅由数字 0 与 1 组成的 n 行 m 列的迷宫。若你位于一格 0 上&#xff0c;那么你可以移动到相邻 4 格中的任意一格 1 上&#xff1b;同样地&#xff0c;若你位于一格 1 上, 那么你可以移动到相邻 4 格中的任意一格 0 上。 现在&#xff0c;有 q 次询问。每次询问…
阅读更多...
11.STL

11.STL

STL阶段 禁止复制 文本查询扩展作业解析 get_file函数的作用就是进行预处理操作&#xff0c;将文件中的每一行的内容放在shared_ptr<vector<string>> file里面进行存储&#xff1b;然后对每一个单词进行处理&#xff0c;将单词与行号放在map<string, shared_p…
阅读更多...
【C/C++】C++类与对象基本概念（抽象封装、类的定义与使用、构造函数、析构函数、静态成员、友元）

【C/C++】C++类与对象基本概念（抽象封装、类的定义与使用、构造函数、析构函数、静态成员、友元）

目录 七、类与对象基本概念7.1 抽象7.2 类的定义与声明7.3 访问控制7.4 类的实现与使用7.5 对象指针、this指针与对象引用7.6 构造函数7.7 析构函数7.8 拷贝构造函数7.9 类类型作为函数参数7.10 对象数组7.11 静态成员7.12 常对象与常成员&#xff08;const&#xff09;7.13 友…
阅读更多...
金融知识普及月答题活动

金融知识普及月答题活动

金融知识普及月答题活动 关键词&#xff1a;金融安全、风险防范、金融常识、反诈宣传 推荐功能&#xff1a;答题、倡议书 宣传角度&#xff1a; 1. 普及金融知识&#xff1a;讲解货币、信用、利率、汇率等基本金融概念&#xff0c;以及储蓄、贷款、信用卡、保险等常见金融产…
阅读更多...
揭秘Xinstall：如何降低你的App推广成本？

揭秘Xinstall：如何降低你的App推广成本？

在移动互联网时代&#xff0c;App推广成为了每个开发者都必须面对的问题。然而&#xff0c;随着市场竞争的加剧&#xff0c;App推广成本也水涨船高&#xff0c;让许多开发者望而却步。今天&#xff0c;我们就来聊聊如何借助Xinstall这一神器&#xff0c;有效降低App推广成本&am…
阅读更多...
电商人必看：1个工具，5倍效率，批量处理图片就是这么简单

电商人必看：1个工具，5倍效率，批量处理图片就是这么简单

作为电商运营者或经常处理图片的你&#xff0c;是否厌倦了繁琐的图片编辑工作&#xff1f;今天&#xff0c;我要分享一个实用的解决方案——图片批量处理工具。 神器介绍&#x1f447; 千鹿设计助手&#xff0c;是一款轻量级、功能非常丰富的设计插件工具合集软件。 拥有多款…
阅读更多...
宏集MIRO-L230工业路由器: 一站式全球联网解决方案

宏集MIRO-L230工业路由器: 一站式全球联网解决方案

在日益互联的世界中&#xff0c;全球覆盖的稳定连接已成为业务成功的关键因素。宏集非常高兴地向您介绍我们的最新创新产品——MIRO-L230工业路由器&#xff0c;这是一款为现代企业量身定制的LTE路由器&#xff0c;为用户带来前所未有的稳定连接体验。 宏集MIRO-L230工业路由器…
阅读更多...
Leetcode3234. 统计 1 显著的字符串的数量

Leetcode3234. 统计 1 显著的字符串的数量

Every day a Leetcode 题目来源&#xff1a;3234. 统计 1 显著的字符串的数量 解法1&#xff1a;枚举左端点 注意到&#xff0c;如果子串中的 0 非常多&#xff0c;多到 0 的个数的平方比 1 的个数都要大&#xff0c;那么这样的子串必然不是 1 显著子串。 设 cnt0 为子串中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023