学习Uni-app开发小程序Day10

前面学习了局部组件的创建和简单使用,今天学习了slot(插槽)和组件之间的传值

1. 插槽的使用
在components中,创建一个组件,给组件设置头部布局、内容布局、底部布局,例如:

<template>
	<view class="layout">
		<view class="header">
			头部布局
		</view>
		<view class="main">
			内容布局
		</view>
		<view class="footer">底部区域</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.layout{
	.header{
		height: 50px;
	}
	.main{
		min-height: 200px;		
	}
	.footer{
		height: 120px;
		background: orange;
	}
}
</style>

在父组件中引用的方式就是在父组件的template中根据子组件的名称进行引用。在父组件中,要给各个位置添加具体的数据的时候,就要用到插槽了,例如:
在这里插入图片描述
这里添加slot,这里出现两个,并且定义名称,这是具名插槽,如果在子组件中有多个插槽,就需要用具名插槽,不然父组件不能明确是给哪里设定的数据
在这里插入图片描述
这里在引用子组件中,因为使用了slot,只能是使用template这个标签,
v-slot:header:这是定义的插槽,在父组件中要用到这种方式,才能定位到要在那个插槽中编辑内容,简便方式是:#header
这里穿插一个:uni-app点击跳转页面,
我这里给一个button,点击后跳转到其他页面,
@click="goto(‘/pages/demoCom/demo-slot’);这是给按钮一个点击事件,点击后进入方法goto中,里面是需要跳转的页路径
function goto(url) {
uni.navigateTo({
url: url
})
}
这里使用的是uni的api,navigateTo,具体的可以查看uni-app的api文件

2. 组件之间传递值
当设置了父组件、子组件,有时要从父组件给子组件传递值,这里就要使用Props,
在子组件中设定接收的参数名,父组件传递过去,例如:

这是父组件,可以传递文字、数组、对象

<template>
	<view class="box">
		<!-- <userInfo :userName="uname" ></userInfo> -->
		<userInfo :obj="obj"></userInfo>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	const uname=ref("王五");
	// const avater=ref("../../static/pic1.png")
	const obj=ref({name:"王五",avater:"../../static/pic1.png"})
 </script>

下面是子组件接收

<template>
	<view class="userInfo">
		<!-- <image :src="avater" mode="" class="avater"></image>
		 <view class="userName">{{userName}}</view> 
		<view class="userName">{{uName}}</view>
		 -->
		 <!-- 这里是直接传递个对象,这是在测试的过程中,进行的显示 -->
		<!-- <view>{{obj}}</view> -->
		<!-- 要显示对象的时候,就直接用接收的对象,然后获取对象的值 -->
		<image :src="obj.avater" mode="" class="avater"></image>
		<view class="userName">{{obj.name}}</view>
	</view>
</template>

<script setup>
	import {computed} from "vue";
	//这是接收父组件传递的参数,使用的方法是defineProps,
	// const props = defineProps(['userName', 'avater'])
	
	// 如果要给传过来的参数进行定义,就是定义穿过来的参数的类型; 例如:
	// const props=defineProps({
	// 	userName:String,
	// 	avater:String
	// })
	
	// 如果要加上默认值,就是当不传的时候,就给一个默认的值
	// const props=defineProps({
	// 	userName:{
	// 		type:String,
	// 		default:"匿名"
	// 	},
	// 	//这里做个记录,当组件设置了默认值,但是在父组件中,有传当前值,只是类型错误的时候,控制台会报警告,
	// 	// 如果在父组件不加入这个参数,则不会报警告,设置的默认值也会显示出来
	// 	avater:{
	// 		type:String,
	// 		default:"../../static/logo.png"
	// 	}
	// })
	
	// 传递对象
	// defineProps(["obj"]);
	// 传递对象的时候,添加默认值
	//在传递对象的时候,添加校验,这里需要使用default方法,然后所有的参数需要使用return的方式,定义默认值
	defineProps({
		obj:{
			type:Object,
			default(){
				return {
					name:"匿名",
					avater:"../../static/logo.png"
				}
			}
		}
	})
	
	//如果要打印父组件传递过来的参数,就需要将参数设定一个变量,然后根据变量名得到传递的参数
	// console.log(props.userName);
	//如何要修改传递过来的参数,不能直接修改,接受过来的是一个只读的数据,可以使用计算属性,然后更改获取值,
	//在template中,就使用定义后的计算属性显示
	// const uName=computed( ()=>props.userName+"@")
	
</script>

<style lang="scss">
	.userInfo {
		width: 100vw;
		height: 200px;
		align-items: center; //设置子节点对齐方式
		justify-content: center; //设置在父组件中的各个子节点的排列方式
		display: flex; //设置元素是否被视为块或者内联元素及子元素的布局
		flex-direction: column; //内部元素在flex容器中布局定义的方向

		image {
			width: 100px;
			height: 100px;
			border-radius: 50% ; //设置设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。
		}

		.userName {
			padding: 10px 0;
			font-size: 15px;
		}

	}
</style>

上面是子组件如果接收各种类型的方式,有详细注释,这里不在做过多的描述了。这就通过父组件给子组件传递参数的办法,这里只要是对defineProps()的使用,
当从子组件给父组件传递,就不能是这种方式了。下面是从子组件到父组件之间的传递:

<template>
	<view>
		<!-- <button @click="$emit('add',Math.random())">子组件按钮</button> -->
		<button @click="onClick">子组件按钮</button>
		<view >=============</view>
		<!-- 如果子组件有两个或者两个以上的需要传递参数的组件,使用方法类似 -->
		<input type="text" @input="onchange" maxlength="3"/>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	// 这里就是在组件中,传递两个参数,是用数组的形式,
	const emit=defineEmits(["add","onchange"])
	function onClick(){
		emit('add',Math.random())
	}
	// 这是传递子组件输入的值到父组件中
	function onchange(e){
		emit("onchange",e.detail.value)
	}
</script>

<style lang="scss" scoped>
	input{
		border: 1px solid #cfcfcf;
		height: 30px;
	}
</style>

这是子组件定义的方法,主要使用的$emit的方法,还有就是defineEmits();
下面是父组件接收的办法:

<template>
	<view class="">
		<lxj-child @add="onAdd" @onchange="onchange"></lxj-child>
		<!-- 下面是接收子组件传递的值,这里是进行style的设定,这里记录下,在接收子组件传递的值后,不能再tmplate中进行更改 -->
		<view class="child" :style="{background:colo,fontSize:inputValue}">num:{{num}}</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const num=ref(0)
	const colo=ref("#fcf")
	const inputValue=ref("");
	// 这是接收子组件传递的值,在template中不能做更改,只能是在这里做修改
	const onchange=function(e){
		inputValue.value=e+"px"
	}
	const onAdd=function(e){
		num.value=e;
		colo.value="#"+getRandomChar()+String(e).substring(3,8)
		console.log(colo.value);
	}
	
	function getRandomChar() {
	  const randomNumber = Math.floor(Math.random() * 6); // 生成0-5的随机数
	  const charCode = 97 + randomNumber; // 97是字母a的ASCII码
	  const randomChar = String.fromCharCode(charCode); // 将ASCII码转换成字符
	  return randomChar;
	}
	 
	// 使用函数
	// console.log(getRandomChar()); // 输出可能是 'a', 'b', 'c', 'd', 'e', 'f' 中的一个
</script>

<style lang="scss" scoped>
	.child{
		width: 200px;
		height: 70px;
		
	}
</style>

这就是从子组件到父组件之间的传递,这里做个记录;
穿插一个点:
function getRandomChar() {
const randomNumber = Math.floor(Math.random() * 6); // 生成0-5的随机数
const charCode = 97 + randomNumber; // 97是字母a的ASCII码
const randomChar = String.fromCharCode(charCode); // 将ASCII码转换成字符
return randomChar;
}
这个方法是获取从a-f直接的随机数,一般的颜色前面都有字母,这里就把获取颜色的字母作为一个随机数显示出来,让颜色更丰富些。
以上就是今天学习的内容,不足之处还有很多,革命尚未成功,同志仍需努力!!!

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

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

相关文章

数据科学:使用Optuna进行特征选择

大家好&#xff0c;特征选择是机器学习流程中的关键步骤&#xff0c;在实践中通常有大量的变量可用作模型的预测变量&#xff0c;但其中只有少数与目标相关。特征选择包括找到这些特征的子集&#xff0c;主要用于改善泛化能力、助力推断预测、提高训练效率。有许多技术可用于执…

Springboot整合 Spring Cloud Gateway

1.Gateway介绍 1.是spring cloud官方推出的响应式的API网关框架&#xff0c;旨在为微服务架构提供一种简单有效的API路由的管理方式&#xff0c;并基于Filter的方式提供网关的基本功能&#xff0c;例如&#xff1a;安全认证&#xff0c;监控&#xff0c;限流等等。 2.功能特征…

计算机网络学习记录 网络的大概认识 Day1

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github gitee 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我会尽力带来有趣的内容 计算机网络学习记录Day1 本文基于1.1 计算机网络在信息…

利用香港多IP服务器进行大数据分析的潜在优势?

利用香港多IP服务器进行大数据分析的潜在优势? 在当今数据驱动的时代&#xff0c;大数据分析已经成为企业获取竞争优势的不二选择。而香港作为一个拥有世界级通信基础设施的城市&#xff0c;提供了理想的环境来部署多IP服务器&#xff0c;从而为大数据分析提供了独特的优势。…

链动2+1结合消费增值:破解用户留存与复购的密码

大家好&#xff0c;我是吴军&#xff0c;来自一家领先的软件开发公司&#xff0c;担任产品经理的职务。今天&#xff0c;我希望能与大家深入交流链动21模式&#xff0c;特别是它在提升用户留存和复购率方面的独特价值。 虽然链动模式在某些人眼中可能被视为传统或已被超越&…

升级! 测试萌新Python学习之连通数据库Pymsql增删改及封装(四)

pymysql 数据库概述python对数据库的增删改查pymysql核心操作事务事务操作pymysql工具类封装每日复习ChatGPT的回答 数据库概述 分类 关系型数据库: 安全 如, mysql oracle SQLite…database tables 行列 非关系型数据库: 高效 如, redis mongoDB…数据存储结构多样 键值对…

半个小时搞懂STM32面经知识——DMA

1.DMA 1.1 什么是DMA&#xff1f; DMA传输将数据从一个地址空间复制到另一个地址空间&#xff0c;提供在外设和存储器之间或者存储器和存储器之间的高速数据传输。 CPU无时不刻的在处理着大量的事务&#xff0c;但有些事情却没有那么重要&#xff0c;比方说数据的复制和存储数…

Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫,两种工作模式)

Vue2—router(配置路径、路由跳转、相关API、多级路由、路由守卫&#xff0c;两种工作模式) 目录 Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫&#xff0c;两种工作模式)安装配置路径路由跳转不携带参数跳转携带参数跳转?形式携带参数地址中直接携带参数 …

存内计算加速大模型——REM-CiM的RGB-事件融合多模态类比计算内存(CiM)技术

本文为大模型&存内计算融合专题的首篇文章&#xff0c;我们将以这篇名为《REM-CiM: Attentional RGB-Event Fusion Multi-modal Analog CiM for Area/Energy-efficient Edge Object Detection during both Day and Night》为例[1]&#xff0c;探讨其在文中提到的多模态大模…

通过ip addr命令无法获取到ip地址,无法ping通百度

问题 今天通过VM安装CentOS虚拟机时&#xff0c;安装完成后&#xff0c;想查看ip地址&#xff0c;使用ip addr命令&#xff0c;发现没有展示网络ip地址&#xff0c;ping百度也不通。 解决方案 CentOS使用网络配置文件来设置网络接口的参数&#xff0c;出现这个问题说明网络的…

GEE数据集——东南亚区域油棕种种植分布(油棕榈树种植园的概率)数据集

森林数据伙伴关系围绕对全球商品驱动的森林砍伐、森林退化和恢复工作的全球监测&#xff0c;加强合作与应用。 世界各国政府和公司都承诺帮助制止砍伐森林和加快恢复&#xff0c;以避免气候变化带来的最坏影响&#xff0c;防止生物多样性丧失&#xff0c;保护森林对人类和自然…

IDM下载器激活

文章目录 1、Internet Download Manager简介2、Internet Download Managery应用3、Internet Download Managery下载 1、Internet Download Manager简介 Internet Download Manager (IDM) 是一款功能强大的下载管理软件&#xff0c;旨在帮助用户更高效地管理和加速其下载任务。它…

计算机网络 3.3OSI参考模型

第三节 OSI参考模型 一、认识OSI/RM 1.描述&#xff1a;定义了一个连接异种计算机的标准主体结构&#xff0c;给网络设计者提供了一个参考规范。 2.组织&#xff1a;国际标准化组织. 3.发展&#xff1a;1979年研究并提出了该国际标准。 4.分层原则&#xff1a; ①层次的划…

vue3 第二十八节 (vue3 事件循环之JS事件循环)

1、什么是事件循环 事件循环就是消息队列&#xff0c;是浏览器渲染主线程的工作方式&#xff1b; 过去将消息队列&#xff0c;简单的分为宏任务 和微任务 两种队列&#xff0c;而对于现在复杂多变的浏览器环境&#xff0c;显然这种处理方式已经不能满足使用&#xff0c;取而代…

基于springboot+vue的自习室管理和预约系统(全套)

一、系统架构 前端&#xff1a;vue | element-ui | html 后端&#xff1a;springboot | mybatis-plus 环境&#xff1a;jdk1.8 | mysql | maven | nodejs 二、代码及数据库 三、功能介绍 01. web端-首页1 02. web端-首页2 03. web端-注册 04. web端-登录 05. w…

【C++ 】红黑树

1.1 红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍&#xff…

HCIP的学习(17)

BGP基础配置 使用直连接口IP地址来建立EBGP对等体关系 1、启动BGP协议 [r1]bgp 100 ----启动BGP协议&#xff0c;并且规定其AS号2、配置设备的RID数值&#xff0c;一般选择设备的loopback接口的IP地址 [r1-bgp]router-id 1.1.1.13、配置BGP对等体信息&#xff0c;包含了对等体…

庙算兵棋推演AI开发初探(4-调用AI模型)

前面讲了如何开展编写规则脚本型Agent&#xff08;智能体&#xff09;的方法&#xff0c;现在探究一下如何调用知识型&#xff08;一般而言的训练出的模型&#xff09;智能体的方法。 这次调用的是庙算平台的demo&#xff08;网址见图&#xff09; 下载了“知识强化学习型”…

ComfyUI 介绍及入门

介绍 ComfyUI 是一种用户界面&#xff0c;它采用了基于节点的流程设计&#xff0c;用于操作一种名为 Stable Diffusion 的技术。这种设计允许用户通过自定义流程来实现更精确的工作流程&#xff0c;并确保结果的可重复性。在 ComfyUI 中&#xff0c;每个模块都承担着特定的任务…

为什么质量工程师必学六西格玛?突破职业发展的瓶颈?

在质量管理领域工作多年&#xff0c;你是否曾感受到事业发展的停滞不前&#xff1f;3年、5年的职业生涯&#xff0c;薪水依旧停留在每月5000-7000&#xff0c;而同行业的其他人却能月入2-3万&#xff0c;这种差距让人不禁陷入深思。 问题究竟出在哪里&#xff1f;为什么我们的…