小程序-基础加强-自定义组件

前言

这次讲自定义组件

1. 准备今天要用到的项目

在这里插入图片描述

在这里插入图片描述

2. 初步创建并使用自定义组件

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

在这里插入图片描述
在这里插入图片描述
这样就成功在home中引入了test组件
在这里插入图片描述
在json中引用了这个组件才能用这个组件
现在我们来实现全局引用组件
在这里插入图片描述
在这里插入图片描述

在app.json这样使用就可以了

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

3. 自定义组件的样式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
发现页面里面的文本和组件里面的文本都变小了

这样会造成样式的冲突，所以我们都不建议使用标签选择器，尽量使用class类名选择器

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

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
这样就都加粗了

4.自定义组件的data和methods

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

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

5. 自定义组件中的properties

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个max表示加1最大为max
在这里插入图片描述

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

6. 自定义组件的数据监听器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
创建一个新的组件，然后在app.json中进行全局引用

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

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

7.自定义组件的数据监听器案例

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

8. 自定义组件中的纯数据字段

在这里插入图片描述
在这里插入图片描述
比如rgb就是纯数据字段
在这里插入图片描述
在这里插入图片描述
然后就是把所有的rgb都改为_rgb
先选中一个rgb，然后ctrl+d，长按，就可以选中全部的rgb了
在这里插入图片描述

9. 自定义组件的生命周期函数

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
旧的方式就是与data那些平级定义，新的就是定义一个lifetimes
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
新旧两种方式同时存在，以新的为主

10. 组件所在页面的生命周期函数

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

11. 自定义组件的插槽

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这是通过插槽填充的内容这个东西就会填充到slot的位置

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

因为这个view没有指定填写哪个插槽，所以没有显示

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

12. 组件通信-使用属性绑定实现父向子共享数据

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

home首页当做一个父组件
在这里插入图片描述
在这里插入图片描述
然后就是在子组件中声明这个count
在这里插入图片描述
这样就成功在资源内部接受了外部值了

在这里插入图片描述
这样就可以在子组件中使用了

下面我们来实现自增加一

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
但是这个加一不同步呢

现在我们要实现的是子组件向父组件传值—》事件绑定

13. 组件通信-使用自定义事件实现子向父共享数据

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
触发自定义事件，就是触发sync，也就是触发syncCount的意思
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

14. 组件通信-使用selectComponent获取组件实例

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们现在试着调用子组件里面的setData方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
id选择器也是可以的

15. 自定义组件的behaviors

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

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

在这里插入图片描述
我们在my-test5中使用behavior
在这里插入图片描述
在这里插入图片描述

这样就可以使用我们导入的behavior了

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以ls的优先级高于zs的

在这里插入图片描述

总结

下一节讲使用npm包

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

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

相关文章

c语言（关键字）

c语言（关键字）

前言&#xff1a; 感谢b站鹏哥c语言 内容&#xff1a; 栈区&#xff08;存放局部变量&#xff09; 堆区 静态区&#xff08;存放静态变量&#xff09; rigister关键字 寄存器&#xff0c;cpu优先从寄存器里边读取数据 #include <stdio.h>//typedef&#xff0c;类型…
阅读更多...
【最长不下降子序列——树状数组、线段树、LIS】

【最长不下降子序列——树状数组、线段树、LIS】

题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e510; int a[N], b[N], tr[N];//a保存权值&#xff0c;b保存索引,tr保存f&#xff0c;g前缀属性最大值 int f[N], g[N]; int n, m; bool cmp(int x, int y) {if(a[x] ! a[y]) return a[x] < a[…
阅读更多...
springboot 启动原理

springboot 启动原理

目标&#xff1a; SpringBootApplication注解认识了解SpringBoot的启动流程 了解SpringFactoriesLoader对META-INF/spring.factories的反射加载认识AutoConfigurationImportSelector这个ImportSelector starter的认识和使用 目录 SpringBoot 启动原理SpringBootApplication 注…
阅读更多...
《Origin画百图》之脊线图

《Origin画百图》之脊线图

1.数据准备&#xff1a;将数据设置为y 2.选择绘图>统计图>脊线图 3.生成基础图形&#xff0c;并不好看&#xff0c;接下来对图形属性进行设置 4.双击图形>选择图案>颜色选择按点>Y值 5.这里发现颜色有色阶&#xff0c;过度并不平滑&#xff0c;需要对色阶进行更…
阅读更多...
安卓(android)实现注册界面【Android移动开发基础案例教程（第2版）黑马程序员】

安卓(android)实现注册界面【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的&#xff08;如果代码有错漏&#xff0c;可查看源码&#xff09; 1.掌握LinearLayout、RelativeLayout、FrameLayout等布局的综合使用。 2.掌握ImageView、TextView、EditText、CheckBox、Button、RadioGroup、RadioButton、ListView、RecyclerView等控件在项目中的…
阅读更多...
星际智慧农业系统（SAS），智慧农业的未来篇章

星际智慧农业系统（SAS），智慧农业的未来篇章

新月人物传记&#xff1a;人物传记之新月篇-CSDN博客 相关文章&#xff1a;星际战争模拟系统&#xff1a;新月的编程之道-CSDN博客 新月智能护甲系统CMIA--未来战场的守护者-CSDN博客 “新月智能武器系统”CIWS&#xff0c;开启智能武器的新纪元-CSDN博客 目录 星际智慧农业…
阅读更多...
MP4基础

MP4基础

一、什么是MP4&#xff1f; MP4是一套用于音频、视频信息的压缩编码标准&#xff0c;由国际标准化组织&#xff08;ISO&#xff09;和国际电工委员会&#xff08;IEC&#xff09;下属的“动态图像专家组”&#xff08;Moving Picture Experts Group&#xff0c;即MPEG&#xff…
阅读更多...
揭秘算法 课程导读

揭秘算法 课程导读

目录 一、老师介绍 二、课程目标 三、课程安排 一、老师介绍 学问小小谢 我是一个热爱分享知识的人&#xff0c;我深信知识的力量能够启迪思考&#xff0c;丰富生活。 欢迎每一位对知识有渴望的朋友&#xff0c;如果你对我的创作感兴趣&#xff0c;或者我们有着共同的兴趣点&…
阅读更多...
Visual Studio Code应用本地部署的deepseek

Visual Studio Code应用本地部署的deepseek

1.打开Visual Studio Code&#xff0c;在插件中搜索continue&#xff0c;安装插件。 2.添加新的大语言模型&#xff0c;我们选择ollama. 3.直接点connect&#xff0c;会链接本地下载好的deepseek模型。 参看上篇文章&#xff1a;deepseek本地部署-CSDN博客 4.输入需求生成可用…
阅读更多...
97，【5】buuctf web [极客大挑战 2020]Greatphp

97，【5】buuctf web [极客大挑战 2020]Greatphp

进入靶场 审代码 <?php // 关闭所有 PHP 错误报告&#xff0c;防止错误信息泄露可能的安全隐患 error_reporting(0);// 定义一个名为 SYCLOVER 的类 class SYCLOVER {// 定义类的公共属性 $sycpublic $syc;// 定义类的公共属性 $loverpublic $lover;// 定义魔术方法 __wa…
阅读更多...
SOME/IP--协议英文原文讲解3

SOME/IP--协议英文原文讲解3

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 Note: Thi…
阅读更多...
大模型综合性能考题汇总

大模型综合性能考题汇总

- K1.5长思考版本 一、创意写作能力 题目1&#xff1a;老爸笑话 要求&#xff1a;写五个原创的老爸笑话。 考察点&#xff1a;考察模型的幽默感和创意能力&#xff0c;以及对“原创”要求的理解和执行能力。 题目2&#xff1a;创意故事 要求&#xff1a;写一篇关于亚伯拉罕…
阅读更多...
Workbench 中的热源仿真

Workbench 中的热源仿真

探索使用自定义工具对移动热源进行建模及其在不同行业中的应用。 了解热源动力学 对移动热源进行建模为各种工业过程和应用提供了有价值的见解。激光加热和材料加工使用许多激光束来加热、焊接或切割材料。尽管在某些情况下&#xff0c;热源 &#xff08;q&#xff09; 不是通…
阅读更多...
unity学习23：场景scene相关，场景信息，场景跳转

unity学习23：场景scene相关，场景信息，场景跳转

目录 1 默认场景和Assets里的场景 1.1 scene的作用 1.2 scene作为project的入口 1.3 默认场景 2 场景scene相关 2.1 创建scene 2.2 切换场景 2.3 build中的场景&#xff0c;在构建中包含的场景 &#xff08;否则会认为是失效的Scene&#xff09; 2.4 Scenes in Bui…
阅读更多...
18.Word：数据库培训课程❗【34】

18.Word：数据库培训课程❗【34】

目录 题目 NO1.2.3.4 NO5设置文档内容的格式与样式 NO6 NO7 NO8.9 NO10.11标签邮件合并 题目 NO1.2.3.4 FnF12&#xff1a;打开"Word素材.docx”文件,将其另存为"Word.docx”在考生文件夹下之后到任务9的所有操作均基于此文件&#xff1a;"Word.docx”…
阅读更多...
tiktok 国际版抖抖♬♬ X-Bogus参数算法逆向分析

tiktok 国际版抖抖♬♬ X-Bogus参数算法逆向分析

加密请求参数得到乱码&#xff0c;最终得到X-Bogus
阅读更多...
OpenCV：图像轮廓

OpenCV：图像轮廓

目录 简述 1. 什么是图像轮廓&#xff1f; 2. 查找图像轮廓 2.1 接口定义 2.2 参数说明 2.3 代码示例 2.4 运行结果 3. 绘制图像轮廓 3.1 接口定义 3.2 参数说明 3.3 代码示例 3.4 运行结果 4. 计算轮廓周长 5. 计算轮廓面积 6. 示例&#xff1a;计算图像轮廓的面…
阅读更多...
GMSL 明星产品之 MAX96724

GMSL 明星产品之 MAX96724

上一篇文章中&#xff0c;我们介绍了摄像头侧 GMSL 加串器 MAX96717. 今天我们来介绍下 GMSL 解串器明星产品 MAX96724&#xff1a; 可将四路 GMSL™2/1 输入转换为 1 路、2 路或 4 路 MIPI D-PHY 或 C-PHY 输出。该器件支持通过符合 GMSL 通道规范的 50Ω 同轴电缆或 100Ω 屏…
阅读更多...
城市道路车辆自行车摩托车公交车检测数据集VOC+YOLO格式5236张5类别

城市道路车辆自行车摩托车公交车检测数据集VOC+YOLO格式5236张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;5236 标注数量(xml文件个数)&#xff1a;5236 标注数量(txt文件个数)&#xff1a;5236 …
阅读更多...
VSCode插件Live Server

VSCode插件Live Server

简介&#xff1a;插件Live Server能够实现当我们在VSCode编辑器里修改 HTML、CSS 或者 JavaScript 文件时&#xff0c;它都能自动实时地刷新浏览器页面&#xff0c;让我们实时看到代码变化的效果。再也不用手动刷新浏览器了&#xff0c;节省了大量的开发过程耗时&#xff01; 1…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023