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

news2025/11/1 6:53:00

前言

这次讲自定义组件

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包

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2291213.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

尝试ai生成figma设计

尝试ai生成figma设计

当听到用ai 自动生成figma设计时，不免好奇这个是如何实现的。在查阅了不少资料后，有了一些想法。参考了：在figma上使用脚本自动生成色谱 这篇文章提供的主要思路是：可以通过脚本的方式构建figma设计。如果我们使用ai 生成figma脚本…
阅读更多...
【周易哲学】生辰八字入门讲解（八）

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

😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本文讲解【周易哲学】生辰八字入门讲解，期待与你一同探索、学习、进步，一起卷起来叭！ 目录 一、六亲女命六亲星六亲宫位相互关系 男命六亲星…
阅读更多...
解决whisper 本地运行时GPU 利用率不高的问题

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

我在windows 环境下本地运行whisper 模型，使用的是nivdia RTX4070 显卡，结果发现GPU 的利用率只有2% 。使用 import torch print(torch.cuda.is_available()) 返回TRUE。表示我的cuda 是可用的。 最后在github 的下列网页上找到了问题 极低的 GPU 利…
阅读更多...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具02

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

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

java异常处理——try catch finally

单个异常处理 1.当try里的代码发生了catch里指定类型的异常之后，才会执行catch里的代码，程序正常执行到结尾 2.如果try里的代码发生了非catch指定类型的异常，则会强制停止程序，报错 3.finally修饰的代码一定会执行，除…
阅读更多...
DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力

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

摘要 我们推出了第一代推理模型：DeepSeek-R1-Zero和DeepSeek-R1。DeepSeek-R1-Zero是一个未经监督微调（SFT）作为初步步骤，而是通过大规模强化学习（RL）训练的模型，展现出卓越的推理能力。通过强…
阅读更多...
低成本、高附加值，具有较强的可扩展性和流通便利性的行业

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

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

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…
阅读更多...
二叉树-堆（补充）

二叉树-堆（补充）

二叉树-堆 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…
阅读更多...
基于springboot私房菜定制上门服务系统设计与实现(源码+数据库+文档)

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

私房菜定制上门服务系统目录 目录 基于springbootvue私房菜定制上门服务系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能实现 （1）菜品管理 （2）公告管理 （3） 厨师管理 2、用…
阅读更多...
2025开源DouyinLiveRecorder全平台直播间录制工具整合包，多直播同时录制、教学直播录制、教学视频推送、简单易用不占内存

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

一、DouyinLiveRecorder软件介绍（文末提供下载） 官方地址：GitHub - ihmily/DouyinLiveRecorder 本文信息来源于作者GitHub地址 一款简易的可循环值守的直播录制工具，基于FFmpeg实现多平台直播源录制，支持自定义配置录制…
阅读更多...
利用飞书机器人进行 - ArXiv自动化检索推荐

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

相关作者的Github仓库 ArXivToday-Lark 使用教程 Step1 新建机器人 根据飞书官方机器人使用手册，新建自定义机器人，并记录好webhook地址，后续将在配置文件中更新该地址。 可以先完成到后续步骤之前，后续的步骤与安全相关&…
阅读更多...
python算法和数据结构刷题[5]：动态规划

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

动态规划（Dynamic Programming, DP）是一种算法思想，用于解决具有最优子结构的问题。它通过将大问题分解为小问题，并找到这些小问题的最优解，从而得到整个问题的最优解。动态规划与分治法相似，但区别在于动态…
阅读更多...
【Rust自学】16.2. 使用消息传递来跨线程传递数据

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

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 16.2.1. 消息传递 有一种很流行而且能保证安全并发的技术（或者叫机制）叫做消息传递。在这种机制里，线…
阅读更多...
解锁豆瓣高清海报(二) 使用 OpenCV 拼接和压缩

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

解锁豆瓣高清海报(二): 使用 OpenCV 拼接和压缩 脚本地址: 项目地址: Gazer PixelWeaver.py pixel_squeezer_cv2.py 前瞻 继上一篇“解锁豆瓣高清海报(一) 深度爬虫与requests进阶之路”成功爬取豆瓣电影海报之后，本文将介绍如何使用 OpenCV 对这些海报进行智…
阅读更多...
利用腾讯云cloud studio云端免费部署deepseek-R1

利用腾讯云cloud studio云端免费部署deepseek-R1

1. cloud studio 1.1 cloud studio介绍 Cloud Studio（云端 IDE）是基于浏览器的集成式开发环境，为开发者提供了一个稳定的云端工作站。支持CPU与GPU的访问。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器即可使用。Clo…
阅读更多...
DeepSeek r1本地安装全指南

DeepSeek r1本地安装全指南

环境基本要求 硬件配置 需要本地跑模型，兼顾质量、性能、速度以及满足日常开发需要，我们需要准备以下硬件： CPU：I9内存：128GB硬盘：3-4TB 最新SSD，C盘确保有400GB，其它都可划成D盘…
阅读更多...
基于VMware的ubuntu与vscode建立ssh连接

基于VMware的ubuntu与vscode建立ssh连接

1.首先安装openssh服务 sudo apt update sudo apt install openssh-server -y 2.启动并检查ssh服务状态 到这里可以按q退出 之后输入命令 ： ip a 红色挡住的部分就是我们要的地址，这里就不展示了哈 3.配置vscode 打开vscode 搜索并安装：…
阅读更多...
【LLM-agent】(task2)用llama-index搭建AI Agent

【LLM-agent】(task2)用llama-index搭建AI Agent

note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool，循环执行：推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词，工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…
阅读更多...
【Redis】Redis 经典面试题解析：深入理解 Redis 的核心概念与应用

【Redis】Redis 经典面试题解析：深入理解 Redis 的核心概念与应用

Redis 是一个高性能的键值存储系统，广泛应用于缓存、消息队列、排行榜等场景。在面试中，Redis 是一个高频话题，尤其是其核心概念、数据结构、持久化机制和高可用性方案。 1. Redis 是什么？它的主要特点是什么？ 答案&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023