uniapp学习（004-1 组件 Part.1）

news2024/12/25 14:00:45

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第26p-第p30的内容

文章目录

    • uniapp和vue差异对比
    • 写几个组件并且引用
    • props传值
      • 添加类型约束
      • 约束类型并且添加默认值
      • props的各种写法
      • 传递对象
        • 设置默认信息
        • 循环头像列表
    • 插槽 slots
      • 具名插槽
    • emit 组件事件
      • 我们希望子组件的数据发送给父组件
      • 另一种写法 在代码块里使用emit

uniapp和vue差异对比

在这里插入图片描述

在这里插入图片描述

写几个组件并且引用

在这里插入图片描述

直接引用组件
在这里插入图片描述
都可以引用
在这里插入图片描述

props传值

给组件添加样式

在这里插入图片描述
在这里插入图片描述
在子组件里添加声明 可以传入的变量名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

可以使用变量
在这里插入图片描述

也可以传图片
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

我们不可以对传过来的数据进行修改 我们要自己定义一个变量
在这里插入图片描述

添加类型约束

在这里插入图片描述

约束类型并且添加默认值

在这里插入图片描述

在这里插入图片描述

props的各种写法

在这里插入图片描述

在这里插入图片描述

传递对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

设置默认信息

在这里插入图片描述
在这里插入图片描述

循环头像列表

在这里插入图片描述

在这里插入图片描述

插槽 slots

在这里插入图片描述

在这里插入图片描述
定义一个组件 并且添加插槽标签
在这里插入图片描述
在引入它的页面 里添加插槽信息

在这里插入图片描述

写几个aaaaa
在这里插入图片描述
在内部有展示
在这里插入图片描述

具名插槽

如果有多个地方需要自定义 可以给每个插槽起个名字，防止混乱
在这里插入图片描述
格式 template v-slot:名字
在这里插入图片描述
v-slot:名字 也可以简写成 #名字
在这里插入图片描述
可以写多个插槽
在这里插入图片描述

emit 组件事件

在这里插入图片描述

我们希望子组件的数据发送给父组件

在子组件里定义一个$emit
在这里插入图片描述
在父组件里调用方法
在这里插入图片描述
在这里插入图片描述

另一种写法 在代码块里使用emit

在这里插入图片描述

也可以定义多个emit事件
子组件写 add和change
在这里插入图片描述
父组件定义 @add和@change
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

JVM性能调优-JVM工具使用

JVM性能调优-JVM工具使用

命令行工具 jps jps -q 只看进程id jps -l 显示java进程的完整类名 jps -m 查看传递给主类main()的参数 jps -v 列出虚拟机启动时的jvm参数 以上参数可以组合使用 jstat 查看JVM统计信息 例：jstat -gc -t 19788 1000 10 -gc：打印gc统计信息 ;-t&am…
阅读更多...
使用激光跟踪仪提升码垛机器人精度

使用激光跟踪仪提升码垛机器人精度

标题1.背景 码垛机器人是一种用于工业自动化的机器人，专门设计用来将物品按照一定的顺序和结构堆叠起来，通常用于仓库、物流中心和生产线上，它们可以自动执行重复的、高强度的搬运和堆垛任务。 图1 码垛机器人 传统调整码垛机器人的方法&a…
阅读更多...
王松绿读《归潮》：岭南文化根脉中流动的文学镜像

王松绿读《归潮》：岭南文化根脉中流动的文学镜像

王松绿 ，生于河南。后于琼从军为文近二十载。现居三亚。 岭南文化根脉中流动的文学镜像 王松绿 小说《归潮》，打破了作者陈崇正向来善于营造的多重宇宙和多线叙事的阅读迷障，故事角色与作者一起，实现了叙事方式、故事内容…
阅读更多...
跨平台游戏的特点

跨平台游戏的特点

跨平台游戏已成为视频游戏行业的主要趋势，这是由于对各种设备和操作系统之间无缝游戏的需求日益增长。这种方法允许玩家在多个平台（如游戏机、PC和移动设备）上享受他们最喜欢的游戏，同时保持相同的体验和进度。随着越来越多的开发…
阅读更多...
SpringBoot开发部署（热部署+常规部署+Docker部署）

SpringBoot开发部署（热部署+常规部署+Docker部署）

开发热部署 SpringBoot模板引擎的页面默认是开启缓存的，如果修改了页面，则刷新页面是得不到修改后的页面的 在application.properties中关闭模板引擎缓存 Thymeleaf spring.thymeleaf.cachefalseFreeMarker spring.freemarker.cachefalseGroovy spring…
阅读更多...
Android -- [SelfView] 自定义多色渐变背景板

Android -- [SelfView] 自定义多色渐变背景板

Android – 自定义多色渐变背景板 前言： Android 自带的 xml 文件内 gradient 设置渐变最多只有三种颜色，使用方便但范围受限，不能很好满足各种需求； 本款多色渐变背景板应运而生：* 1. 支持圆角模式，矩形模…
阅读更多...
同望OA tooneAssistantAttachement.jsp 任意文件读取漏洞复现

同望OA tooneAssistantAttachement.jsp 任意文件读取漏洞复现

0x01 产品简介 同望OA，即同望科技打造的智企云协同管理系统，是一款高效的企业协同移动办公系统。秉承“互联网++企业管理”理念，定位于以移动互联办公为基础的企业协同管理软件平台。它旨在通过内置常用标准模块与专项管理模块应用，安全快速地打通管理与业务通道，实现管理…
阅读更多...
微软最新 Office 办公软件2025下载 – Microsoft 365 正版优惠订阅

微软最新 Office 办公软件2025下载 – Microsoft 365 正版优惠订阅

​ 以前 Office 365 是微软打造的「办公软件订阅」服务。订阅后，用户可以在多个平台使用Word、Excel、PowerPoint、OneDrive云存储网盘等正版办公应用。 微软希望这种订阅方式能够推广到更多的产品和用户，于是决定将 Office 365 升级为全新的「Microsoft…
阅读更多...
【数据结构】6道经典链表面试题

【数据结构】6道经典链表面试题

目录 1.返回倒数第K个节点【链接】 ​代码实现 2.链表的回文结构【链接】 代码实现 3.相交链表【链接】 代码实现 4.判断链表中是否有环【链接】 代码实现 常见问题解析 5.寻找环的入口点【链接】 代码实现1 ​代码实现2 6.随机链表的复制【链接】 代码实现 1.…
阅读更多...
51单片机的无线通信智能车库门【proteus仿真+程序+报告+原理图+演示视频】

51单片机的无线通信智能车库门【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块红外传感器光照传感器时钟模块步进电机蓝牙按键、LED、蜂鸣器等模块构成。适用于智能车库自动门、无线控制车库门等相似项目。 可实现功能: 1、LCD1602实时显示北京时间和自动/手动模式，以及验证是否成…
阅读更多...
盘点2024年双十一最值得入手的好物，双十一购物清单宝藏好物推荐

盘点2024年双十一最值得入手的好物，双十一购物清单宝藏好物推荐

随着2024年双十一购物节的脚步逐渐临近，消费者们正摩拳擦掌，准备迎接这场年度最大的购物狂欢。在这个特别的日子里，各大品牌纷纷推出前所未有的优惠活动，各种好物琳琅满目，让人眼花缭乱，为了帮助大家在这海…
阅读更多...
机器学习、深度学习评价指标汇总：TP、TN、FP、FN、AP、mAP、IoU、mAP@3、Prec@10、 Acc@10

机器学习、深度学习评价指标汇总：TP、TN、FP、FN、AP、mAP、IoU、mAP@3、Prec@10、 Acc@10

系列文章目录 文章目录 系列文章目录一、真正例（True Positive）、假正例（False Positive）、真负例（True Negative）和假负例（False Negative）是评估分类模型性能的重要概念。1. 定义2…
阅读更多...
基于多种机器学习的酒店客户流失预测模型的研究与实现

基于多种机器学习的酒店客户流失预测模型的研究与实现

文章目录 有需要本项目的代码或文档以及全部资源，或者部署调试可以私信博主项目介绍实现过程 有需要本项目的代码或文档以及全部资源，或者部署调试可以私信博主 项目介绍 项目背景： 在当今竞争激烈的酒店行业中，预测和防止客户流…
阅读更多...
什么是PCB和PCBA，他们的区别是什么？

什么是PCB和PCBA，他们的区别是什么？

相信很多人对于PCB电路板并不陌生，可能是日常生活中也能经常听到，但对PCBA或许就不太了解，甚至把和PCB混淆起来。那么PCB是什么？PCBA是如何演变出来的？PCB与PCBA的区别又是什么呢？方案商如何高效找到供应商…
阅读更多...
Ubuntu 22.04.4 LTS更换下载源

Ubuntu 22.04.4 LTS更换下载源

方法1：使用图形界面更换下载源 1. 打开软件和更新应用 2. 在Ubuntu 软件标签中，点击“下载自”旁边的下拉菜单，选择“其他” 3. 点击“选择最佳服务器”来自动选择最快的服务器 4. 选择服务器 5. 确定并关闭窗口，系统会提示您重新…
阅读更多...
应变计的校准方法和周期是怎样的?

应变计的校准方法和周期是怎样的?

应变计的校准方法和周期应变计是用于测量物体应变的关键设备，广泛应用于工程测试和科学研究领域。正确的校准方法和合理的校准周期对于确保应变计测量结果的准确性至关重要。校准方法应变计的方法通常涉及以下几个步骤： 零点校准：这是校准过程…
阅读更多...
跨界的胜利：机器学习与神经网络的物理之光

跨界的胜利：机器学习与神经网络的物理之光

近日，2024年诺贝尔物理学奖颁发给了机器学习与神经网络领域的研究者，这是历史上首次出现这样的情况。这项奖项原本只授予对自然现象和物质的物理学研究作出重大贡献的科学家，如今却将全球范围内对机器学习和神经网络的研究和开发作为了一种能…
阅读更多...
Robust多模态模型的开发

Robust多模态模型的开发

本文所涉及所有资源均在 传知代码平台 可获取。 目录 Robust 多模态模型：寻找遗失的模态！ 一、研究背景 二、模型结构和代码 三、数据集介绍 六、性能展示 六、实现过程 七、运行过程 Robust 多模态模型：寻找遗失的模态！ 近年来&a…
阅读更多...
MPLS LDP协议

MPLS LDP协议

文章目录 LDP标签分发协议工作原理LDP应用倒数第二跳弹出 LDP标签分发协议 基于FEC自动分配标签构建LSP用于建立动态LSPLDP报文头部结构信息类型 工作原理 LDP工作过程 发送Hello消息用于发现邻居；UDP发送LSR_1主动发起并建立TCP连接；TCP进行建立主动方发…
阅读更多...
Node.js安装与配置 [详细步骤(实践操作)]

Node.js安装与配置 [详细步骤(实践操作)]

安装与配置 安装Node.js一、(1).下载（可以直接在浏览器下的电脑）一、(2).下载（有些电脑不能在浏览器下载，比如：在浏览器下出来的是IDEA图标）二、安装三、配置环境变量 验证是否安装成功修改模块下载位置一、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023