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

uniapp 创建组件

组件:用于将某个功能的 HTML、CSS、JS 封装到一个文件中,提高代码的复用性和可维护性。

创建组件

一、在根目录中创建 components 文件夹,右键点击新建组件。

二、输入组件名称、选择默认模板、点击创建组件。

三、在组件中正常编写内容即可。

<template><view class="mytest"><view>组件数据:{{ num }}</view><button @click="add">点击+1</button></view>
</template><script>
export default {name:"my-test",data() {return {num: 0,};},methods:{// 事件方法add(){this.num++;},}
}
</script>

四、在页面中引入,通过 components 配置项注册并使用组件。

<template><view class="home"><view>首页</view><!-- 使用组件 --><my-test></my-test></view>
</template><script>
// 引入组件
import myTest from "../../components/my-test.vue";
export default {components: { myTest }, // 注册组件// 其它配置...
}
</script>

五、最终效果

原创作者:吴小糖

创作时间:2024.1.6 

相关文章:

  • 海外代理IP在游戏中有什么作用?
  • 产品的流程
  • YOLOv8融合改进 更换检测头为Detect_DyHead同时添加C2f-EMSC和C2f-EMSCP模块
  • 开始卷TED:第1篇 —— 《Embrace the near win》—— part: 3
  • 平衡搜索二叉树(AVL树)
  • Python画国旗
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • 图片纹理贴图
  • VPC网络架构下的网络上数据采集
  • MIT 6.s081前置xv6教材和课程总结——第二章 操作系统架构
  • golang学习-匿名函数和闭包
  • c#调试程序一次启动两个工程(多个工程)
  • 服务器GPU温度过高挂掉排查记录
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • 避免重复扣款:分布式支付系统的幂等性原理与实践
  • ----------
  • 【React系列】如何构建React应用程序
  • 【技术性】Search知识
  • canvas 五子棋游戏
  • es的写入过程
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • Koa2 之文件上传下载
  • log4j2输出到kafka
  • 创建一种深思熟虑的文化
  • 从零开始学习部署
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 跨域
  • 排序(1):冒泡排序
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • linux 淘宝开源监控工具tsar
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​虚拟化系列介绍(十)
  • # 飞书APP集成平台-数字化落地
  • #mysql 8.0 踩坑日记
  • #Ubuntu(修改root信息)
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (附源码)计算机毕业设计ssm-Java网名推荐系统
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .gitignore文件_Git:.gitignore
  • .NET 4.0中的泛型协变和反变
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .Net多线程总结
  • .Net接口调试与案例
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • @31省区市高考时间表来了,祝考试成功
  • @Transaction注解失效的几种场景(附有示例代码)
  • @Transient注解
  • [ CTF ] WriteUp-2022年春秋杯网络安全联赛-冬季赛
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)