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

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

news 2026/5/16 9:03:15

前言

这次讲自定义组件

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. 自定义组件的样式发现页面里面的文本和组件里面的文…...

编程日记 2025/1/31 7:39:06

Kafka 压缩算法详细介绍

文章目录一、Kafka 压缩算法概述二、Kafka 压缩的作用2.1 降低网络带宽消耗2.2 提高 Kafka 生产者和消费者吞吐量2.3 减少 Kafka 磁盘存储占用2.4 减少 Kafka Broker 负载2.5 降低跨数据中心同步成本三、Kafka 压缩的原理3.1 Kafka 压缩的基本原理3.2. Kafka 压缩的工作流程…...

编程日记 2025/1/31 7:36:49

单词翻转（信息学奥赛一本通1144）

题目来源信息学奥赛一本通（C版）在线评测系统题目描述 1144：单词翻转时间限制: 1000 ms 内存限制: 65536 KB 提交数:60098 通过数: 26099 【题目描述】输入一个句子(一行)，将句子中的每一个单词翻转后输出。【输入…...

编程日记 2025/1/31 7:34:30

DeepSeek 模型全览：探索不同类别的模型

DeepSeek 是近年来备受关注的 AI 研究团队，推出了一系列先进的深度学习模型，涵盖了大语言模型（LLM）、代码生成模型、多模态模型等多个领域。本文将大概介绍 DeepSeek 旗下的不同类别的模型，帮助你更好地理解它们的特点…...

编程日记 2025/1/31 7:33:23

我的2024年年度总结

序言在前不久（应该是上周）的博客之星入围赛中铩羽而归了。虽然心中颇为不甘，觉得这一年兢兢业业，每天都在发文章，不应该是这样的结果（连前300名都进不了）。但人不能总抱怨，总要向前…...

编程日记 2025/1/31 7:31:16

DeepSeek回答人不会干出超出视角之外的事

我本身是有着深度思考习惯的重度患者，当我遇到一个AI会深度思考的时候，我觉得找到了一个同类，是不是可以学习周伯通的左右手互博大法？下面我们拿着我的一点思考，让DeepSeek来再深度思考挖掘。人不会干出超出视角之外的…...

编程日记 2025/1/31 7:30:09

前端知识速记—JS篇：null 与 undefined

前端知识速记—JS篇：null 与 undefined 什么是 null 和 undefined？ 1. undefined 的含义 undefined 是 JavaScript 中默认的值，表示某个变量已被声明但尚未被赋值。当尝试访问一个未初始化的变量、函数没有返回值时，都会得到 u…...

编程日记 2025/1/31 7:28:05

Hive:静态分区(分区语法,多级分区,分区的查看修改增加删除)

hive在建表时引入了partition概念。即在建表时，将整个表存储在不同的子目录中，每一个子目录对应一个分区。在查询时，我们就可以指定分区查询，避免了hive做全表扫描，从而提高查询率。 oracle和Hive分区的区别 orcale在…...

编程日记 2025/1/31 7:23:48

升级到Mac15.1后pod install报错

升级Mac后，Flutter项目里的ios项目运行 pod install报错， 遇到这种问题，不要着急去百度，大概看一下报错信息，每个人遇到的问题都不一样。别人的解决方法并不一定适合你； 下面是报错信息： #…...

编程日记 2025/1/31 7:22:34

智慧园区管理系统为企业提供高效运作与风险控制的智能化解决方案

内容概要快鲸智慧园区管理系统，作为一款备受欢迎的智能化管理解决方案，致力于为企业提供高效的运作效率与风险控制优化。具体来说，这套系统非常适用于工业园、产业园、物流园、写字楼及公寓等多种园区和商办场所。它通过数字化与智能化的手…...

编程日记 2025/1/31 7:20:18

JxBrowser 8.2.2 版本发布啦！

JxBrowser 8.2.2 版本发布啦！ • 已更新 #Chromium 至更新版本 • 实施了多项质量改进 🔗 点击此处了解更多详情。 🆓 获取 30 天免费试用。...

编程日记 2025/1/31 7:19:14

LangChain的开发流程

文章目录 LangChain的开发流程开发密钥指南3种使用密钥的方法编写一个取名程序 LangChain表达式 LangChain的开发流程为了更深人地理解LangChain的开发流程，本文将以构建聊天机器人为实际案例进行详细演示。下图展示了一个设计聊天机器人的LLM应用程序。除了Wb服务…...

编程日记 2025/1/31 7:10:06

AI在自动化测试中的伦理挑战

在软件测试领域，人工智能（AI）已经不再是遥不可及的未来技术，而是正在深刻影响着测试过程的现实力量。尤其是在自动化测试领域，AI通过加速测试脚本生成、自动化缺陷检测、测试数据生成等功能，极大提升了测试…...

编程日记 2025/1/31 7:00:55

《Origin画百图》之同心环图

《Origin画百图》第四集——同心环图入门操作可查看合集中的《30秒，带你入门Origin》具体操作： 1.数据准备：需要X和Y两列数据 2. 选择菜单绘图 > 条形图，饼图，面积图: 同心圆弧图 3. 这是绘制的基础图形&…...

编程日记 2025/1/31 6:57:48

TPA注意力机制详解及代码复现

基本原理在深入探讨TPA注意力机制的数学表达之前，我们需要先理解其基本原理。TPA注意力机制是一种创新的注意力机制，旨在解决传统注意力机制在处理大规模数据时面临的内存和计算效率问题。 TPA注意力机制的核心思想是利用张量分解来压缩注意力机制中的Q、K、V表示，同时…...

编程日记 2025/1/31 6:55:38

深入理解Java并发编程中的原子操作、volatile关键字与读写锁

1. 原子操作与AtomicInteger等原子类 1.1 原子操作的原理在多线程环境中，多个线程可能会同时访问和修改共享资源。如果这些操作不是原子性的（即可以被中断），那么可能会导致数据不一致或竞态条件（race condition）。原子操作是指不可分割的操作，即在多线程环境下，这些…...

编程日记 2025/1/31 6:54:32

HTML(快速入门)

欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦~点击这里了解更多内容目录一、前言二、HTML基础2.1 什么是HTML?2.2 认识HTML标签2.2.1 HTML标签当中的基本结构2.2.2 标签层次结构 2.3 HTML常见标签2.3.1 标题标签2.3.2 段落标签2.3.3…...

编程日记 2025/1/31 6:50:14

SpringBoot Web开发（SpringMVC)

SpringBoot Web开发（SpringMVC) MVC 核心组件和调用流程 Spring MVC与许多其他Web框架一样，是围绕前端控制器模式设计的，其中中央 Servlet DispatcherServlet 做整体请求处理调度！ . 除了DispatcherServletSpringMVC还会提供其他…...

编程日记 2025/1/31 6:48:05

汽车蓝牙钥匙定位仿真小程序

此需求来自于粉丝的真实需求，假期没事，牛刀小试。一、项目背景如今，智能车钥匙和移动端定位技术已经相当普及。为了探索蓝牙 Beacon 在短距离定位场景下的可行性，我们搭建了一个简易原型：利用 UniApp 在移动端采集蓝牙信标的 RSSI（信号强度），通过三边定位算法估算钥…...

编程日记 2025/1/31 6:44:01

K8S中高级存储之PV和PVC

高级存储 PV和PVC 由于kubernetes支持的存储系统有很多，要求客户全都掌握，显然不现实。为了能够屏蔽底层存储实现的细节，方便用户使用， kubernetes引入PV和PVC两种资源对象。 PV（Persistent Volume） PV是…...

编程日记 2025/1/31 6:40:56

Cursor3.3发布：Skill 自动转为快捷操作

想象一下：每次发版之前，你盯着一个庞大PR，脑子里同时跑着十几个线程——这个模块要重构、那个API要优化、还有安全扫描不能忘。以前你得像个孤独的指挥家，一根根指挥棒轮流挥。现在，Cursor直接给你拉来一支AI交响乐团…...

编程新知 2026/5/16 8:23:21

040二叉树的直径

二叉树的直径题目链接：https://leetcode.cn/problems/diameter-of-binary-tree/description/?envTypestudy-plan-v2&envIdtop-100-liked 我的解答： 无分析：自己没有什么思路。看了官方题解后的解答： int ans; public int d…...

编程新知 2026/5/16 7:53:36

RAG已死？收藏这篇，小白程序员必看：上下文工程才是大模型未来！

本文探讨了围绕RAG技术的争议，分析了三种不同观点：RAG正进化为更智能的检索系统、RAG已成为核心工程学科、RAG正被长上下文和智能体取代。文章指出，简单的RAG已过时，但提供外部知识的需求依然存在，未来RAG将作为组件之…...

编程新知 2026/5/16 7:00:53

R 和 Python 数据可视化必备库的精华指南

原文：towardsdatascience.com/the-essential-guide-to-r-and-python-libraries-for-data-visualization-33be8511c976 成为某些编程语言的专业人士是每位有志于数据科学的专业人士的目标。在无数语言中达到一定水平是每个人的关键里程碑。对于数据工程师来说&…...

编程新知 2026/5/16 6:56:28

S7-1500 PLC做高速数据采集？一个32位微秒时间戳的完整实现与避坑指南

S7-1500 PLC微秒级时间戳工程实践：从硬件同步到数据拼接的完整方案在工业自动化领域，毫秒级响应已是基础要求，而微秒级精度正成为高端装备的标配。当一台数控机床以8000转/分钟的速度运行时，每个刀具接触工件的瞬间都需被精确记录…...

编程新知 2026/5/16 5:16:09

告别ifconfig！用systemd-networkd和networkctl命令管理Linux网络（Ubuntu 22.04+实战）

告别ifconfig！用systemd-networkd和networkctl命令管理Linux网络（Ubuntu 22.04实战） 在Linux网络管理的演进历程中，ifconfig和ip命令曾长期占据主导地位。然而随着systemd生态的成熟，systemd-networkd配合networkctl命…...

编程新知 2026/5/16 5:13:37

GraphQL-WS服务器配置：完整参数详解与最佳实践【免费下载链接】graphql-ws Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client. 项目地址: https://gitcode.com/gh_mirrors/gr/graphql-ws GraphQL-WS…...

编程新知 2026/5/16 4:37:48