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 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构OJ实验6-二叉树的遍历以及应用

A. DS二叉树—二叉树构建与遍历&#xff08;不含框架&#xff09; 题目描述 给定一颗二叉树的逻辑结构如下图&#xff0c;&#xff08;先序遍历的结果&#xff0c;空树用字符‘#’表示&#xff0c;例如AB#C##D##&#xff09;&#xff0c;建立该二叉树的二叉链式存储结构&…

H266/VVC多样化视频编码工具概述

全景视频编码 全景视频&#xff1a; 具有360度全包围视角的球面视频。 全景视频编码&#xff1a; 包括H266在内的视频编码算法都是以平面视频为对象的&#xff0c;为了采用传统的视频编码编码算法&#xff0c;全景视频需要转换为平面视频&#xff0c;其中经纬图等角映射&#…

适用于 Windows 的免费U盘数据恢复方法详解

笔式驱动器&#xff08;Pen Drive&#xff09;是一种方便、小巧、便于携带的数据存储设备&#xff0c;也称为U盘、拇指驱动器、U盘等。“笔式驱动器”的名称来源于其外观&#xff0c;即体积小、体积小、方便携带。与传统笔相似&#xff0c;尽管它实际上并不能书写。 有几个功能…

如何把硬盘(分区)一分为二?重装系统的小伙伴不可不看

注意事项&#xff1a;本教程操作不当会导致数据丢失 请谨慎操作 请谨慎操作 请谨慎操作 前言 相信各位小伙伴都会切土豆吧&#xff0c;本教程就是教大家如何切土豆切得好的教程。 啊哈哈哈&#xff0c;开玩笑的。 比如你有一个D盘是200GB&#xff0c;想要把它变成两个100G…

3D空间漫游技术的日趋成熟,让博物馆数字化大放异彩!

随着科技的飞速发展&#xff0c;互联网已经成为人们生活中不可或缺的一部分。在这个数字化时代&#xff0c;博物馆也紧跟时代潮流&#xff0c;将传统的实体博物馆与现代科技相结合&#xff0c;诞生了一种全新的博物馆形式——3D线上博物馆。这种新型博物馆凭借其独特的魅力&…

vue组件scoped的作用 目的: 解决多个组件样式名相同, 冲突问题

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性&#xff0c;下面一起来看一下&#xff0c;希望对大家有帮助。 vue组件-scoped作用 需求: p标签名选择器, 设置背景色 问题: 发现组件里的p和外面的p都生效了 解决: 给Pannel.vue组件里sty…

设计模式之单例模式的懒饿汉

懒汉式 说白了就是你不叫我我不动&#xff0c;你叫我我才动。 类初始化模式&#xff0c;也叫延迟占位模式。在单例类的内部由一个私有静态内部类来持有这个单例类的实例。因为在 JVM 中&#xff0c;对类的加载和类初始化&#xff0c;由虚拟机保证线程安全。 public class Singl…

一个H3C交换机周期性断网并自动恢复的排查案例

一个朋友发我一个H3C日志&#xff0c;这个交换机是汇聚层交换机&#xff0c;1和2口是trunk口&#xff0c;其它接口是access接口&#xff0c;17-21口据说接的都是监控、终端。日志里面看到大量的拓朴改变&#xff0c;好几个网口up、down的日志&#xff0c;怀疑是环路&#xff0c…

Vue3——element-plus表格组件怎样得到当前行的id

实现方法&#xff1a; <el-table-column property"address" label"操作" show-overflow-tooltip header-align"center" v-slot"scope"><el-button type"success" click"editBtn(scope.row.id)">编辑…

视频转音频软件哪个好? 11 个高效的视频转音频转换器分享

网络上拥有数百个值得观看和聆听的音乐视频。但要聆听喜爱的音乐&#xff0c;用户必须观看整个视频&#xff0c;即使只有音乐让他们兴奋。那么&#xff0c;如何从视频中提取音频呢&#xff1f;简单的答案是使用视频到音频转换器将视频转换为音频格式并将其保存在您的设备上以供…

pyqt6 + pycharm 搭建+使用入门

首先安装PyQt6和PyQt6-tools。使用如下命令&#xff1a; pip install PyQt6 PyQt6-tools 但是运行后会报如下错误&#xff1a; 这个时候按照提示执行命令升级pip即可 python.exe -m pip install --upgrade pip 配置pycharm&#xff1a; 打开pycharm&#xff0c;进入setting&am…

创建专业电子邮件签名:提升个人与品牌形象的实用指南

电子邮件签名乃是品牌建设中常被忽略的一环。试想一下&#xff0c;若名片只是普通的、手工切割的复印纸&#xff0c;上面用黑体打印着你的联系方式&#xff0c;那将是多么平凡无奇。这将显得廉价、乏味且不专业——这正是人们不愿如此的原因。相反&#xff0c;他们渴望让自己的…

每日一博 - 多租户技术及其三种数据存储策略

文章目录 概述应用程序隔离数据隔离小结 概述 多租户技术&#xff08;Multi-Tenant Technology&#xff09;是软件即服务&#xff08;SaaS&#xff09;架构中的一项核心技术&#xff0c;允许单一软件应用或服务同时服务于多个客户&#xff08;即“租户”&#xff09;&#xff…

[每周一更]-(第81期):PS抠图流程(扭扭曲曲的身份证修正)

应朋友之急&#xff0c;整理下思路&#xff0c;分享一下~~ 分两步走&#xff1a;先用磁性套索工具圈出要处理的图&#xff1b;然后使用透视剪裁工具&#xff0c;将扭曲的图片拉平即可&#xff1b;(macbook pro) 做事有规则&#xff0c;才能更高效;用什么工具&#xff0c;先列举…

大模型日报-20240105

骁龙888实时运行&#xff0c;美团、浙大等打造全流程移动端多模态大模型MobileVLM https://mp.weixin.qq.com/s/-KnewDBeCN7a1XPk22u9Pw MobileVLM 是一款专为移动设备设计的快速、强大和开放的视觉语言助手。它结合了面向移动设备的架构设计和技术&#xff0c;包括从头开始训练…

【激活函数】PReLU 激活函数

1、介绍 PReLU&#xff08;Parametric Rectified Linear Unit&#xff09;激活函数是ReLU&#xff08;Rectified Linear Unit&#xff09;激活函数的一种改进。它是由 He et al. 在 2015 年提出的&#xff0c;旨在解决ReLU激活函数的一些局限性。 # 定义 PReLU 激活函数 prelu…

从vue小白到高手,从一个内容管理网站开始实战开发第六天,登录功能后台功能设计--API项目中的登录实现(二),工厂模式创建数据库连接

一、回顾 在第五天的时候我们开始创建后台所以需项目,并创建项目所需要的相关实体类,具体内容没有掌握的小伙伴可以看点击下面的链接去学习。 从vue小白到高手,从一个内容管理网站开始实战开发第六天,登录功能后台功能设计--API项目中的登录实现(一)-CSDN博客文章浏览阅读…

记一次实战云渗透总结

点击星标&#xff0c;即时接收最新推文 云渗透思路 所谓的云渗透通常指SaaS或PaaS渗透&#xff0c;即将服务器端的某些服务搭建在云服务器上&#xff0c;源代码的开发、升级、维护等工作都由提供方进行。从原理上看&#xff0c;云渗透思路与传统渗透思路相差无几。站点必须由底…

竞赛练一练 第24期:NOC大赛每日一练,scratch题目刷题第3天,包含答案解析

023年NOC大赛创客智慧编程赛项图形化复赛模拟题一,包含答案解析 本次题目来源:NOC 大赛创客智慧编程赛项图形化复赛模拟题(一) 第一题: 制作一个生日贺卡小程序. 1.点击绿旗后蛋糕出现在 (0,-80) 的位置,大小为 100,造型为 cake-b2.当碰到鼠标指针时,将造型切换为 cak…

MyBatis 源码分析(四):反射模块

前言 上一篇我们了解了Mybatis解析器模块&#xff0c;MyBatis 源码分析&#xff08;三&#xff09;&#xff1a;解析器模块 本篇我们来了解反射模块。相比 parsing 包来说&#xff0c;reflection 包的代码量大概是 2-3 倍。当然&#xff0c;不要慌&#xff0c;都是比较简单的代…