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

前言

这次讲自定义组件

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.mzph.cn/news/894253.shtml

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

相关文章

docker安装emqx

docker安装emqx

emqx安装 拉取emqx镜像 docker pull emqx/emqx:v4.1.0 运行docker容器 docker run -tid --name emqx -p 1883:1883 -p 8083:8083 -p 8081:8081 -p 8883:8883 -p 8084:8084 -p 18083:18083 emqx/emqx:v4.1.0 放行端口 1、如果要是自己的虚拟机，并且关闭了防火墙&a…
阅读更多...
【4Day创客实践入门教程】Day4 迈向高手之路——进一步学习！

【4Day创客实践入门教程】Day4 迈向高手之路——进一步学习！

Day4 迈向高手之路——进一步学习！ 目录 Day4 迈向高手之路——进一步学习！更多的开发板外壳制作 Day0 创想启程——课程与项目预览Day1 工具箱构建——开发环境的构建Day2 探秘微控制器——单片机与MicroPython初步Day3 实战演练——桌面迷你番茄钟Day4…
阅读更多...
深度学习之“缺失数据处理”

深度学习之“缺失数据处理”

缺失值检测 缺失数据就是我们没有的数据。如果数据集是由向量表示的特征组成，那么缺失值可能表现为某些样本的一个或多个特征因为某些原因而没有测量的值。通常情况下，缺失值由特殊的编码方式。如果正常值都是正数，那么缺失值可能被标记为-1…
阅读更多...
日志收集Day007

日志收集Day007

1.配置ES集群TLS认证: (1)elk101节点生成证书文件 cd /usr/share/elasticsearch ./bin/elasticsearch-certutil cert -out config/elastic-certificates.p12 -pass "" --days 3650 (2)elk101节点为证书文件修改属主和属组 chown elasticsearch:elasticsearch con…
阅读更多...
arm-linux-gnueabihf安装

arm-linux-gnueabihf安装

Linaro Releases windows下打开wsl2中的ubuntu，资源管理器中输入： \\wsl$gcc-linaro-4.9.4-2017.01-x86_64_arm-linux-gnueabihf.tar.xz 复制到/home/ark01/tool 在 Ubuntu 中创建目录： /usr/local/arm，命令如下： …
阅读更多...
LabVIEW透镜多参数自动检测系统

LabVIEW透镜多参数自动检测系统

在现代制造业中，提升产品质量检测的自动化水平是提高生产效率和准确性的关键。本文介绍了一个基于LabVIEW的透镜多参数自动检测系统，该系统能够在单一工位上完成透镜的多项质量参数检测，并实现透镜的自动搬运与分选，极大地提升了检…
阅读更多...
【算法】动态规划专题① ——线性DP python

【算法】动态规划专题① ——线性DP python

目录 引入简单实现稍加变形举一反三实战演练总结 引入 楼梯有个台阶，每次可以一步上1阶或2阶。一共有多少种不同的上楼方法？ 怎么去思考？ 假设就只有1个台阶，走法只有：1 只有2台阶： 11，2 只有3台…
阅读更多...
C++11（中）

C++11（中）

新增默认成员函数 C11之前，默认成员函数有六个，构造函数，析构函数，拷贝构造，拷贝赋值重载，取地址重载，const 取地址重载。 C11增加了 移动构造 和 移动赋值重载 如果类没有实现移动构造&…
阅读更多...
强化学习笔记——4策略迭代、值迭代、TD算法

强化学习笔记——4策略迭代、值迭代、TD算法

基于策略迭代的贝尔曼方程和基于值迭代的贝尔曼方程，关系还是不太理解 首先梳理一下： 通过贝尔曼方程将强化学习转化为值迭代和策略迭代两种问题 求解上述两种贝尔曼方程有三种方法：DP（有模型），MC&#xff…
阅读更多...
计算机网络 笔记 网络层 3

计算机网络 笔记 网络层 3

IPv6 IPv6 是互联网协议第 6 版（Internet Protocol Version 6）的缩写，它是下一代互联网协议，旨在解决 IPv4 面临的一些问题，以下是关于 IPv6 的详细介绍： 产生背景： 随着互联网的迅速发展&…
阅读更多...
【搜索回溯算法篇】：拓宽算法视野--BFS如何解决拓扑排序问题

【搜索回溯算法篇】：拓宽算法视野--BFS如何解决拓扑排序问题

✨感谢您阅读本篇文章，文章内容是个人学习笔记的整理，如果哪里有误的话还请您指正噢✨ ✨ 个人主页：余辉zmh–CSDN博客 ✨ 文章所属专栏：搜索回溯算法篇–CSDN博客 文章目录 一.广度优先搜索（BFS）解决拓扑排…
阅读更多...
23.Word：小王-制作公司战略规划文档❗【5】

23.Word：小王-制作公司战略规划文档❗【5】

目录 NO1.2.3.4 NO5.6​ NO7.8.9​ NO10.11​ NO12​ NO13.14 NO1.2.3.4 布局→页面设置对话框→纸张：纸张大小：宽度/高度→页边距：上下左右→版式：页眉页脚→文档网格：勾选只指定行网格✔→ 每页：…
阅读更多...
视频脚本生成器（基于openai API和streamlit）

视频脚本生成器（基于openai API和streamlit）

utils.py： # 所有和ai交互的代码放进utils.py里（utils 通常是 “utilities” 的缩写，意为 “实用工具” 或 “实用函数”）from langchain.prompts import ChatPromptTemplate from langchain_openai import ChatOpenAI from lan…
阅读更多...
Android --- CameraX讲解

Android --- CameraX讲解

预备知识 surface surfaceView SurfaceHolder surface 是什么？ 一句话来说： surface是一块用于填充图像数据的内存。 surfaceView 是什么？ 它是一个显示surface 的View。 在app中仍在 ViewHierachy 中，但在wms 中可以理解为…
阅读更多...
Longformer：处理长文档的Transformer模型

Longformer：处理长文档的Transformer模型

Longformer：处理长文档的Transformer模型 摘要 基于Transformer的模型由于自注意力操作的二次复杂度，无法处理长序列。为了解决这一限制，我们引入了Longformer，其注意力机制与序列长度呈线性关系，使其能够轻松处理数…
阅读更多...
python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像匹配

python学opencv|读取图像（五十二）使用cv.matchTemplate()函数实现最佳图像匹配

【1】引言 前序学习了图像的常规读取和基本按位操作技巧，相关文章包括且不限于： python学opencv|读取图像-CSDN博客 python学opencv|读取图像（四十九）原理探究：使用cv2.bitwise()系列函数实现图像按位运算-CSDN博客…
阅读更多...
MySQL为什么默认引擎是InnoDB ？

MySQL为什么默认引擎是InnoDB ？

大家好，我是锋哥。今天分享关于【MySQL为什么默认引擎是InnoDB ？】面试题。希望对大家有帮助； MySQL为什么默认引擎是InnoDB ？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL 默认引擎是 InnoDB，主要…
阅读更多...
蓝桥杯真题k倍区间

蓝桥杯真题k倍区间

题目如下 代码解析： 成功AC
阅读更多...
python项目之requirements.txt文件

python项目之requirements.txt文件

Python项目中可以包含一个 requirements.txt 文件，用于记录所有依赖包及其精确的版本号用以新环境部署。 当我们开发新项目的时候，会用virtualenv创建很多python独立环境，这时候就会出现在不同环境下安装相同的模块的情况，这时候…
阅读更多...
算法题（53）：对称二叉树

算法题（53）：对称二叉树

审题： 需要我们判断二叉树是否满足对称结构，并返回判断结果 思路： 方法一：递归 其实是否对称分成两部分判断 第一部分：根节点是否相等 第二部分：根节点一的左子树和根节点二的右子树是否相等，根…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023