当前位置：首页 > article >正文

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

article 2026/5/8 23:21:44

前言

这次讲自定义组件

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包

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

前言这次讲自定义组件 1. 准备今天要用到的项目 2. 初步创建并使用自定义组件这样就成功在home中引入了test组件在json中引用了这个组件才能用这个组件现在我们来实现全局引用组件在app.json这样使用就可以了 3. 自定义组件的样式发现页面里面的文本和组件里面的文…...

编程日记 2026/5/1 2:01:32

尝试ai生成figma设计

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本…...

编程日记 2026/5/8 20:36:38

【周易哲学】生辰八字入门讲解（八）

😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本文讲解【周易哲学】生辰八字入门讲解，期待与你一同探索、学习、进步，一起卷起来叭！ 目录一、六亲女命六亲星六亲宫位相互关系男命六亲星…...

编程日记 2026/5/7 15:41:54

康德哲学与自组织思想的渊源：从《判断力批判》到系统论的桥梁

康德哲学与自组织思想的渊源：从《判断力批判》到系统论的桥梁第一节：康德哲学中的自然目的论与自组织思想核心内容： 康德哲学中的自然目的论和反思判断力概念，为现代系统论中的自组织思想提供了哲学基础，预见了复…...

编程日记 2026/2/21 6:11:11

解决whisper 本地运行时GPU 利用率不高的问题

我在windows 环境下本地运行whisper 模型，使用的是nivdia RTX4070 显卡，结果发现GPU 的利用率只有2% 。使用 import torch print(torch.cuda.is_available()) 返回TRUE。表示我的cuda 是可用的。最后在github 的下列网页上找到了问题极低的 GPU 利…...

编程日记 2026/5/7 16:45:35

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

工具运行前的环境准备 1、登录用户管理员权限确认工具使用的登录用户(-u后面的用户)，必须具有管理员的权限，因为需要读取系统表例：Export.bat -s 10.48.111.12 -d db1 -u test -p test -schema dbo 　　　　 2、Powershell的安全策略确认…...

编程日记 2026/4/29 17:51:45

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后，才会执行catch里的代码，程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常，则会强制停止程序，报错 3.finally修饰的代码一定会执行，除…...

编程日记 2026/4/29 17:51:49

【人工智能】使用Python和Hugging Face构建情感分析应用：从模型训练到Web部署

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界情感分析是自然语言处理（NLP）中的重要任务，它通过分析文本来判断情绪或观点的倾向性。近年来，预训练语言模型如BERT、GPT等在情感分析任…...

编程日记 2026/2/17 12:51:05

DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

摘要我们推出了第一代推理模型：DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调（SFT）作为初步步骤，而是通过大规模强化学习（RL）训练的模型，展现出卓越的推理能力。通过强…...

编程日记 2026/4/29 17:51:48

算法随笔_37: 交替合并字符串

上一篇:算法随笔_36: 复写零-CSDN博客题目描述如下: 给你两个字符串 word1 和 word2 。请你从 word1 开始，通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长，就将多出来的字母追加到合并后字符串的末尾。返回合并后的字符串。示例…...

编程日记 2026/2/14 4:26:10

低成本、高附加值，具有较强的可扩展性和流通便利性的行业

目录虚拟资源类 1. 网课教程 2. 设计素材 3. 软件工具服务类 1. 写作服务 2. 咨询顾问 3. 在线教育 4. 社交媒体管理虚拟资源类 1. 网课教程特点：高附加值，可复制性强，市场需求大。执行流程： 选择领域&#xff1a…...

编程日记 2026/5/3 15:25:03

vue入门到实战二

目录 2.1 计算属性computed 2.1.1什么是计算属性 2.1.2 只有getter方法的计算属性 2.1.3 定义有getter和setter方法的计算属性 2.1.4 计算属性和methods的对比 2.2 监听器属性watch 2.2.1 watch属性的用法 2.2.2 computed属性和watch属性的对比 2.1 计算属性computed…...

编程日记 2026/5/5 3:25:04

基于FPGA的BT1120编解码

BT1120与BT656 类似 BT1120与BT656同类属于一个视频协议，两者无论从组成、协议、同步码以及传输过程都是十分相似： 1、两者都是以F（场）、V（帧）、H（消隐）、D（有效）来区分数据的内容。 2、两者的传输数据都采用一样的方式，即内同步传输数据。 3、两者都传输的数据都是…...

编程日记 2026/5/6 16:55:43

二叉树-堆（补充）

二叉树-堆 1.二叉树的基本特性2.堆2.1.堆的基本概念2.2.堆的实现2.2.1.基本结构2.2.2.堆的初始化2.2.3.堆的销毁2.2.4.堆的插入2.2.5.取出堆顶的数据2.2.6.堆的删除2.2.7.堆的判空2.2.8.堆的数据个数2.2.9.交换2.2.10.打印堆数据2.2.11.堆的创建2.2.12.堆排序2.2.13.完整代码 3…...

编程日记 2026/5/6 4:06:33

基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

私房菜定制上门服务系统目录目录基于springbootvue私房菜定制上门服务系统设计与实现一、前言二、系统功能设计三、系统实现 1、管理员功能实现 （1）菜品管理 （2）公告管理 （3） 厨师管理 2、用…...

编程日记 2026/4/30 23:29:22

2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

一、DouyinLiveRecorder软件介绍（文末提供下载） 官方地址：GitHub - ihmily/DouyinLiveRecorder 本文信息来源于作者GitHub地址一款简易的可循环值守的直播录制工具，基于FFmpeg实现多平台直播源录制，支持自定义配置录制…...

编程日记 2026/5/7 17:22:32

利用飞书机器人进行 - ArXiv自动化检索推荐

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人根据飞书官方机器人使用手册，新建自定义机器人，并记录好webhook地址，后续将在配置文件中更新该地址。可以先完成到后续步骤之前，后续的步骤与安全相关&…...

编程日记 2026/4/29 22:53:25

25.2.2学习内容

通过前序遍历和后序遍历求可能的二叉树的种数（AI生成）： #include<stdio.h> #include<string.h> #include<stdlib.h> #include<math.h>struct TreeNode {char val;struct TreeNode *left;struct TreeNode *right; };…...

编程日记 2026/3/13 13:34:41

python算法和数据结构刷题[5]：动态规划

动态规划（Dynamic Programming, DP）是一种算法思想，用于解决具有最优子结构的问题。它通过将大问题分解为小问题，并找到这些小问题的最优解，从而得到整个问题的最优解。动态规划与分治法相似，但区别在于动态…...

编程日记 2026/5/7 19:08:41

Compose笔记(二)--LaunchedEffect

这一节了解一下LaunchedEffect，在 Jetpack Compose 里，LaunchedEffect是一种用于启动协程的可组合函数，其主要用途是在协程里执行异步操作。LaunchedEffect函数能够接收一个或多个key参数。 1 key的含义: LaunchedEffect函数的key参数指的是…...

编程日记 2026/3/20 22:40:52

QT知识点复习

1.qt核心机制对象树、信号和槽、事件机制 2.对象树的作用优化了内存回收机制。子对象实例化的时候，被父对象放对象树上，父对象释放内存，子对象也释放内存 3.信号和槽的作用实现多个组件之间的通讯 4.信号和槽的几种连接方式 1.UI界面提…...

编程日记 2026/3/23 14:05:50

【Rust自学】16.2. 使用消息传递来跨线程传递数据

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.2.1. 消息传递有一种很流行而且能保证安全并发的技术（或者叫机制）叫做消息传递。在这种机制里，线…...

编程日记 2026/4/30 6:48:48

Python 合并 Excel 单元格

合并 Excel 单元格是 Excel 数据处理和表格设计中的一项常用操作。例如，在制作表格标题时，经常会将多个单元格合并，使标题能够跨列显示，更加醒目和美观。此外，当对数据进行分类时，为了使同一类别的数据在视…...

编程日记 2026/2/19 23:40:34

解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

解锁豆瓣高清海报(二): 使用 OpenCV 拼接和压缩脚本地址: 项目地址: Gazer PixelWeaver.py pixel_squeezer_cv2.py 前瞻继上一篇“解锁豆瓣高清海报(一) 深度爬虫与requests进阶之路”成功爬取豆瓣电影海报之后，本文将介绍如何使用 OpenCV 对这些海报进行智…...

编程日记 2026/5/8 2:57:41