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

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

news 2026/2/8 19:03:49

前言

这次讲自定义组件

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

通过Wrangler CLI在worker中创建数据库和表

官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...

编程新知 2026/1/31 6:18:08

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2026/2/2 16:55:46

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...

编程新知 2025/11/4 0:47:29

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码：冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2026/2/4 18:09:46