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

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

news 2026/2/8 15:20:56

前言

这次讲自定义组件

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2026/1/21 18:20:51

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/1/26 2:48:53