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

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

ops/2025/2/3 18:34:36/

前言

这次讲自定义组件

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/ops/155371.html

相关文章

STM32 旋转编码器

STM32 旋转编码器

旋转编码器简介旋转编码器：用来测量位置、速度或旋转方向的装置，当其旋转轴旋转时，其输出端可以输出与旋转速度和方向对应的方波信号，读取方波信号的频率和相位信息即可得知旋转轴的速度和方向类型：机械触点式/霍尔传…

阅读更多...

pandas（三）Series使用

pandas（三）Series使用

一、Series基础使用 import pandasd {x:100,y:200,z:300} s1 pandas.Series(d) #将dict转化为Series print(s1)print("") l1 [1, 2, 3] l2 [a, b, c] s2 pandas.Series(l1, indexl2) #list转为Series print(s2)print("") s3 pandas.Series([11…

阅读更多...

非根目录部署 nextjs 项目，资源文件请求404 的问题

非根目录部署 nextjs 项目，资源文件请求404 的问题

最近在学习next项目编写的代码放到服务器上静态资源404 先分析问题到服务器上查看是有资源目录的是不是项目配置有问题是不是nginx配置有问题经过排查1和2是没有问题的目前来看只有3 检查一下nginx配置尝试着把静态资源的配置禁用问题解决我的next项目用的是pm2管理…

阅读更多...

Josephus Problem II CSES - 2163

Josephus Problem II CSES - 2163

有3种方法 Solution 1 - ordered_set Utilizing the ordered_set This data structure is an extension of the general set in C. It allows searching for the K-th smallest element in O(log n) time complexity. #include <iostream> using namespace std; #…

阅读更多...

【大数据技术】教程01：搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell）

【大数据技术】教程01：搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell）

搭建完全分布式高可用大数据集群（VMwareCentOSFinalShell） 资源下载 VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.isoFinalShell 4.5.12 注：请在阅读本篇文章前，将以上资源下载下来。写在前面本章主要介…

阅读更多...

C# 装箱和拆箱(以及 as ,is)

C# 装箱和拆箱(以及 as ,is)

装箱（Boxing）是指将值类型转换为引用类型的过程拆箱（Unboxing）是将引用类型转换回值类型的过程。 int a 1;object b a; //装箱object obj 10;int num (int)obj; //拆箱ArrayList list new ArrayList();list.Add(123);//装箱…

阅读更多...

告别页面刷新！如何使用AJAX和FormData优化Web表单提交

告别页面刷新！如何使用AJAX和FormData优化Web表单提交

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧 02-HTML常见文本标签解析：从基础到进阶的全面指南 03-HTML从入门到精通：链接与图像标签全解析 04-HTML 列表标签全解析：无序与有序列表的深度应用 05-HTML表格标签全面…

阅读更多...

python3+TensorFlow 2.x 基础学习（一）

python3+TensorFlow 2.x 基础学习（一）

目录 TensorFlow 2.x基础 1、安装 TensorFlow 2.x 2、TensorFlow 2.x 基础概念 2、1 Eager Execution 2、2 TensorFlow 张量（Tensor） 3、使用Keras构建神经网络模型 3、1 构建 Sequential 模型 3、2 编译模型 1、Optimizer（优化器&a…

阅读更多...

最新文章