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

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

news 2025/9/14 22:40:07

前言

这次讲自定义组件

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/9/9 10:13:07

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/9/13 21:35:53

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2025/9/12 23:22:04

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/9/14 22:18:38

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/9/4 15:28:38

【网络安全】开源系统getshell漏洞挖掘

审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/9/10 16:32:15