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

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

devtools/2025/2/3 10:45:17/

前言

这次讲自定义组件

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.ppmy.cn/devtools/155696.html

相关文章

【Linux网络编程】数据链路层

【Linux网络编程】数据链路层

前言： 数据链路层非常简单，对于程序员来说，这里只需要大致了解即可，本篇文章不做重点说明。数据链路层介绍数据链路层是OSI位于物理层之上和网络层之下，这一层的报文叫做帧。它的主要任务是确保数据从一个节点可靠地…

阅读更多...

基于 YOLOv8+PyQt5 界面自适应的无人机红外目标检测系统项目介绍框架

基于 YOLOv8+PyQt5 界面自适应的无人机红外目标检测系统项目介绍框架

基于 YOLOv8PyQt5 界面自适应的无人机红外目标检测系统项目介绍框架【毕业与课程大作业参考】基于yolov8pyqt5界面自适应的无人机红外目标检测系统demo.zip资源-CSDN文库 （毕业设计 / 课程大作业参考方案） 一、项目背景与意义无人机在军事侦察、灾害…

阅读更多...

【C语言设计模式学习笔记1】面向接口编程/简单工厂模式/多态

【C语言设计模式学习笔记1】面向接口编程/简单工厂模式/多态

面向接口编程可以提供更高级的抽象，实现的时候，外部不需要知道内部的具体实现，最简单的是使用简单工厂模式来进行实现，比如一个Sensor具有多种表示形式，这时候可以在给Sensor结构体添加一个enum类型的type，…

阅读更多...

Spark On Yarn External Shuffle Service

Spark On Yarn External Shuffle Service

个人博客地址：Spark On Yarn External Shuffle Service | 一张假钞的真实世界本文基于spark-3.1.2-bin-without-hadoop.tgz版本，所以spark-3.1.2-yarn-shuffle.jar已经在节点的${SPARK_HOME}/yarn目录下。 HADOOP_CLASSPATH 在所有NodeManager节点上…

阅读更多...

算法基础学习——快排与归并（附带java模版）

算法基础学习——快排与归并（附带java模版）

快速排序和归并排序是两种速度较快的排序方式，是最应该掌握的两种排序算法， （一）快速排序（不稳定的） 基本思想：分治平均时间复杂度：O(nlogn) / 最慢O(n^2) / 最快O(n) 步骤&…

阅读更多...

小程序设计和开发：如何研究同类型小程序的优点和不足。

小程序设计和开发：如何研究同类型小程序的优点和不足。

一、确定研究目标和范围明确研究目的在开始研究同类型小程序之前，首先需要明确研究的目的。是为了改进自己的小程序设计和开发，还是为了了解市场趋势和用户需求？不同的研究目的会影响研究的方法和重点。例如，如果研究目的是为了…

阅读更多...

基于单片机的盲人智能水杯系统（论文+源码）

基于单片机的盲人智能水杯系统（论文+源码）

1 总体方案设计本次基于单片机的盲人智能水杯设计，采用的是DS18B20实现杯中水温的检测，采用HX711及应力片实现杯中水里的检测，采用DS1302实现时钟计时功能，采用TTS语音模块实现语音播报的功能，并结合STC89C52单片机作…

阅读更多...

（9）上：学习与验证 linux 里的 epoll 对象里的 EPOLLIN、 EPOLLHUP 与 EPOLLRDHUP 的不同

（9）上：学习与验证 linux 里的 epoll 对象里的 EPOLLIN、 EPOLLHUP 与 EPOLLRDHUP 的不同

（1）经过之前的学习。俺认为结论是这样的，因为三次握手到四次挥手，到 RST 报文，都是 tcp 连接上收到了报文，这都属于读事件。所以： EPOLLIN : 包含了读事件， FIN 报文的正常四次挥手、…

阅读更多...

最新文章