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

embedded/2024/10/22 16:48:20/

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

总时长 23:40:00 共116P

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

文章目录

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

vue_11">uniapp和vue差异对比

在这里插入图片描述

在这里插入图片描述

写几个组件并且引用

在这里插入图片描述

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

props传值

给组件添加样式

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

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

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

在这里插入图片描述

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

添加类型约束

在这里插入图片描述

约束类型并且添加默认值

在这里插入图片描述

在这里插入图片描述

props的各种写法

在这里插入图片描述

在这里插入图片描述

传递对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

设置默认信息

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

循环头像列表

在这里插入图片描述

在这里插入图片描述

插槽 slots

在这里插入图片描述

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

在这里插入图片描述

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

具名插槽

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

emit 组件事件

在这里插入图片描述

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

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

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

在这里插入图片描述

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

在这里插入图片描述


http://www.ppmy.cn/embedded/127620.html

相关文章

OpenCV视频I/O(17）视频写入类VideoWriter之检查视频编写器是否已经成功初始化的函数isOpened()的使用

OpenCV视频I/O(17）视频写入类VideoWriter之检查视频编写器是否已经成功初始化的函数isOpened()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 如果视频编写器已经成功初始化，则返回 true。 isOpened()函数用于检查 VideoWriter 对象是否已经成功初始化并且准备好写入视频帧。…
阅读更多...
pdf阅读器哪个好用？5个软件帮助你快速阅读pdf文件

pdf阅读器哪个好用？5个软件帮助你快速阅读pdf文件

pdf阅读器哪个好用？5个软件帮助你快速阅读pdf文件 如果你在寻找好用的 PDF 阅读器，有很多强大的软件可以帮助你轻松、高效地阅读和处理 PDF 文件。这些软件不仅可以简单地查看文件，还能提供标注、评论、注释和文档管理等额外功能。以下是5款…
阅读更多...
【计算机网络】IPv4地址的表示方法

【计算机网络】IPv4地址的表示方法

文章目录 概念表示方法网络部分和主机部分子网掩码特殊地址 概念 IPv4（Internet Protocol version 4）地址是用于标识网络设备的32位数字地址。 表示方法 IPv4地址通常以点分十进制的形式表示，由四个十进制数构成，每个数的取值范…
阅读更多...
LangChain使用Prompt02

LangChain使用Prompt02

1.设置提示 from langchain.prompts import ChatPromptTemplate prompt_template ChatPromptTemplate.from_messages([("system", "你是一位专业的翻译，能够将{input_language}翻译成{output_language}，并且输出文本会根据用户要求的任…
阅读更多...
JavaScript将array数据下载到Excel中

JavaScript将array数据下载到Excel中

具体代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widt…
阅读更多...
Python：方法的链式调用

Python：方法的链式调用

相关阅读 Pythonhttps://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 在Python编程中&#xff0c;方法的链式调用是一种简洁且优雅的编程风格&#xff0c;它允许你在一行代码中连续调用多个方法&#xff0c;这种编程模式在简化代码、提升可…
阅读更多...
Android Compose 控件基本属性

Android Compose 控件基本属性

本文的代码由上一篇文章的Demo进一步书写完成, 传送门:Android Compose的基本使用-CSDN博客 _____________________________________________________________________________ 以下代码分别列举了控件的: 内边距,外边距,内容居中,渐变自定义边框,宽度权重,string资源引用等…
阅读更多...
解决方案：“＜”not supported between instances instances of “int” and “str”

解决方案：“＜”not supported between instances instances of “int” and “str”

文章目录 一、现象二、解决方案 一、现象 # 按照2024年10月01日为界拆分数据集 train df[:2024-09-30].iloc[:, 0:1].values #训练集 test df[2024-10-01:].iloc[:, 0:1].values #测试集“<”not supported between instances instances of “int” and “str” 二…
阅读更多...
最新文章

Copyright @ 2022~2023