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

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

news/2025/1/31 9:47:10 标签: 微信小程序, 基础加强, 自定义组件

前言

这次讲自定义组件

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.niftyadmin.cn/n/5838569.html

相关文章

Win11下帝国时代2无法启动解决方法

Win11下帝国时代2无法启动解决方法

鼠标右键点图标，选择属性点开始，输入启用和关闭

阅读更多...

随机森林例子

随机森林例子

完整代码： # 导入必要的库 from sklearn.datasets import load_iris from sklearn.ensemble import RandomForestClassifier from sklearn.model_selection import train_test_split from sklearn.metrics import accuracy_score import numpy as np# 加载鸢尾花数…

阅读更多...

拼车（1094）

拼车（1094）

1094. 拼车 - 力扣（LeetCode） 解法： class Solution { public:bool carPooling(vector<vector<int>>& trips, int capacity) {uint32_t passenger_cnt 0;//将原数据按照from排序auto func_0 [](vector<int> & …

阅读更多...

mysql重学（一）mysql语句执行流程

mysql重学（一）mysql语句执行流程

思考一条查询语句如何执行？mysql语句中若列不存在，则在哪个阶段报错一条更新语句如何执行？redolog和binlog的区别？为什么要引入WAL什么是Changbuf？如何工作写缓冲一定好吗？什么情况会引发刷脏页删除语句会…

阅读更多...

2021版小程序开发4——基础加强

2021版小程序开发4——基础加强

2021版小程序开发4——基础加强学习笔记 2025 自定义组件组件中behaviors的作用安装和使用vant-weapp组件库使用MobX实现全局数据共享对小程序的API进行Promise化具体的内容还包括：使用npm包、全局数据共享、分包和自定义tabBar的案例； 1 自定义组件 …

阅读更多...

Web-3.0学习路线

Web-3.0学习路线

方向学习内容✅ 区块链基础区块链、智能合约、共识机制✅ 智能合约Solidity / Rust（Ethereum / Solana）✅ 前端React.js, Next.js, Web3.js, ethers.js✅ 后端Node.js, Python, Golang（链上数据）✅ 存储IPFS, Arweave, Filecoin&a…

阅读更多...

Leetcode 131 分割回文串(纯DFS)

131. 分割回文串https://leetcode.cn/problems/palindrome-partitioning/https://leetcode.cn/problems/palindrome-partitioning/ 给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是回文串。返回 s 所有可能的分割方案。示例 1&#xff1a…

阅读更多...

[Java]泛型(二)泛型方法

[Java]泛型(二)泛型方法

1.定义在 Java 中，泛型方法是指在方法声明中使用泛型类型参数的一种方法。它使得方法能够处理不同类型的对象，而不需要为每种类型写多个方法，从而提高代码的重用性。泛型方法与泛型类不同，泛型方法的类型参数仅仅存在于方法的…

阅读更多...

最新文章