Vue 组件基础(五)

一、Vue 组件的基础概念

     组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue的编译器为它添加特殊功能。每个组件负责一部分特定的任务,比如:显示一个按钮、一个表单或者一个复杂的页面布局。

    Vue让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。

组件的作用 

  1. 提高可维护性:将应用拆分成多个小的组件,使得每个组件的功能相对单一,易于理解和修改。当应用的某个部分出现问题时,可以快速定位到相应的组件进行修复。
  2. 可复用性:一旦创建了一个组件,可以在不同的地方重复使用,减少代码重复。例如,一个通用的输入框组件可以在多个页面中使用。
  3. 团队协作:不同的开发人员可以同时开发不同的组件,提高开发效率。

二、创建和注册组件 

1、 单文件组件(SFC)

单文件组件是 Vue 中推荐的组件编写方式,它将一个组件的模板、脚本和样式写在一个以 .vue 为后缀的文件中。

<template><div><el-button @click="count++">点我 {{count}}</el-button></div>
</template><script setup>import {ref} from 'vue'const count=ref(100)
</script><style>.el-button{background: bisque;}
</style>

2 、全局组件注册

使用 Vue.component() 方法进行全局注册

main.js主入口文件中注册全局组件

 

一旦全局注册了组件,就可以在任何新创建的Vue实例/组件的模板中作为自定义元素使用。

 

注意: 全局注册应谨慎使用,因为这会污染Vue的全局作用域,可能导致命名冲突。通常建议只对基础结构或者第三方组件进行全局注册,而对于应用特有的组件,最好在局部注册。 

3、 局部组件注册

在使用 <script setup> 的单文件组件中,导入的组件可以直接在模板中使用,无需注册:

<template><div><h1>这是子组件!</h1><MyComponentVue></MyComponentVue></div>
</template><script setup>import MyComponentVue from './MyComponent.vue';
</script><style>
</style>

三、组件命名格式

组件的命名可以使用驼峰式命名法或短横线分隔命名法。在注册组件时,需要保持命名的一致性;

  1. 使用 驼峰标识符(组件名:MyComponet)     <MyComponent></MyComponent>

  2. 使用 短横线分隔符(组件名:my-component)<my-component></my-component> 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ 存储机制

一、消息存储机制 不管是持久化的消息还是非持久化的消息都可以被写入到磁盘。持久化的消息在到达队列时就被写入到磁盘&#xff0c;非持久化的消息一般只保存在内存中&#xff0c;在内存吃紧的时候会被换入到磁盘中&#xff0c;以节省内存空间。这两种类型的消息的落盘处理都…

随机性、熵与随机数生成器:解析伪随机数生成器(PRNG)和真随机数生成器(TRNG)

随机性在诸多领域中扮演着至关重要的角色,涵盖密码学、仿真和机器学习等方面。因为随机性为无偏决策、不可预测序列和安全加密提供了基础。然而生成随机数是一项复杂的任务,理解伪随机数生成(pseudo-random number generation, PRNG)与真随机数生成(true random number generat…

从零开始点亮一个LED灯 —— keil下载、新建工程、版本烧录、面包板使用、实例代码

一、keil下载 参考视频&#xff1a;Keil5安装教程视频 (全套资料51和32皆可用Keil5编译设置)_哔哩哔哩_bilibili 视频内容包括下载链接、安装教程、库导入&#xff0c;非常详细&#xff01; 二、新建工程 2.1.使用stm32CubeMX新建工程 10. 使用STM32CubeMX新建工程 — [野…

嵌入式硬件电子电路设计(三)电源电路之负电源

引言&#xff1a;在对信号线性度放大要求非常高的应用需要使用双电源运放&#xff0c;比如高精度测量仪器、仪表等;那么就需要给双电源运放提供正负电源。 目录 负电源电路原理 负电源的作用 如何产生负电源 负电源能作功吗&#xff1f; 地的理解 负电压产生电路 BUCK电…

互斥量的使用

官方的描述 互斥量主要是对于共享资源的保护 其中参数要注意 osMutexRecursive&#xff1a;//递归互斥量 互斥锁嵌套属性&#xff0c;同一个线程可以在不锁定自身的情况下多次使用互斥锁。每当拥有互斥锁的线程获得互斥锁时&#xff0c;锁计数就会增加。互斥锁也必须被释放多次…

商务英语学习柯桥学外语到泓畅-老外说“go easy on me”是什么意思?

在口语中“go easy on sb ”这个短语是很常见的 01 go easy on me 怎么理解&#xff1f; 在口语中&#xff0c;“go easy on me”是一个非常常见的表达&#xff0c;通常表示请求对方在某方面对自己宽容一些&#xff0c;不要对自己太过苛刻或严厉。 短语&#xff08;go&#xff…

vscode在cmake config中不知道怎么选一个工具包?select a kit

vscode在cmake config中不知道怎么选一个工具包&#xff0c;或者发现一直在用VS的工具包想换成自己的工具包。select a kit vscode在cmake config中不知道怎么选一个工具包&#xff0c;或者发现一直在用VS的工具包想换成自己的工具包。select a kit 1.在VSCode中 按ctrlshift…

SpringBoot【实用篇】- 热部署

文章目录 目标:1.手动启动热部署2.自动启动热部署4.禁用热部署 目标: 手动启动热部署自动启动热部署热部署范围配置关闭热部署 1.手动启动热部署 当我们没有热部署的时候&#xff0c;我们必须在代码修改完后再重启程序&#xff0c;程序才会同步你修改的信息。如果我们想快速查…

AI 原生时代,更要上云:百度智能云云原生创新实践

本文整理自百度云智峰会 2024 —— 云原生论坛的同名演讲。 我今天分享的主题&#xff0c;是谈谈在云计算和 AI 技术快速发展和深入落地的背景下&#xff0c;百度智能云在云原生的基础设施产品和技术层面做的一些创新实践。 毋庸置疑&#xff0c;过去十几年云计算和 AI 技术是…

Java项目实战II基于Java+Spring Boot+MySQL的植物健康系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 基于Java、…

BGP路径属性与路由反射器

前言 IBGP水平分割规则用于防止AS内部产生环路&#xff0c;在很大程度上杜绝了IBGP路由产生环路的可能性&#xff0c;但是同时也带来了新的问题&#xff1a;BGP路由在AS内部只能传递一跳&#xff0c;如果建立IBGP对等体全互联模型又会加重设备的负担。 BGP 路径属性 AS_Path …

uniapp学习(010-2 实现抖音小程序上线)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第113p的内容 文章目录 抖音小程序下载抖音开发者工具先去开发者工具里进行测试 抖音开放平台配置开始打包上传…

无线基础配置

配置图 各部分配置 AC1 vlan b [AC6605]vlan batch 10 20 100 Info: This operation may take a few seconds. Please wait for a moment...done. [AC6605]int [AC6605]interface g [AC6605]interface GigabitEthernet 0/0/2 [AC6605-GigabitEthernet0/0/2]port …

影刀RPA实战:识别简单计算验证码

1.官方计算验证码 基于影刀AI引擎的验证码识别指令&#xff0c;该指令不是长期免费&#xff0c;有一定的免费额度&#xff0c;用完之后需要我们到影刀官方充值。 上图使我们要识别的计算验证码 影刀指令代码&#xff1a; 配置我们选择计算题&#xff0c;文件路径本次指定本地…

HarmonyOS:UIAbility组件概述

一、概述 UIAbility组件是一种包含UI的应用组件&#xff0c;主要用于和用户交互。 UIAbility的设计理念&#xff1a; 原生支持应用组件级的跨端迁移和多端协同。支持多设备和多窗口形态。 UIAbility划分原则与建议&#xff1a; UIAbility组件是系统调度的基本单元&#xff0c…

单链表的基本操作实现

定义 链表节点长这个样子&#xff0c;数据域data指针域next指向下一个结点 typedef struct lnode {int data;struct lnode *next; }lnode ,*linklist; 初始化 /*初始化*/ linklist f1(){linklist l(linklist)malloc(sizeof(lnode));l->nextNULL;return l; }int main(){l…

C++ 优先算法——复写零(双指针)

目录 题目&#xff1a;复写零 1. 题目解析 2. 算法原理 一. 先找到最后一个“复写”数 处理边界情况 二. 复写操作 3. 代码实现 题目&#xff1a;复写零 1. 题目解析 题目截图&#xff1a; 该题目要求的与移动零相似&#xff0c;都要在一个数组上进行操作&#xff0c;…

使用linuxdeployqt打包Qt程序问题及解决方法

dpkg: 处理归档 libmysqlclient18_5.6.25-0ubuntu1_amd64.deb (--install)时出错&#xff1a; 预依赖问题 - 将不安装libmysqlclient18:amd64 在处理时有错误发生&#xff1a; libmysqlclient18_5.6.25-0ubuntu1_amd64.deb下载libmysqlclient18/5.6.25 libmysqlclient18/5.6…

配置BGP与IGP交互和路由自动聚合示例

组网需求 如图所示&#xff0c;用户将网络划分为AS65008和AS65009&#xff0c;在AS65009内&#xff0c;使用IGP协议来计算路由&#xff08;该例使用OSPF做为IGP协议&#xff09;。要求实现两个AS之间的互相通信。 配置思路 采用如下的思路配置BGP与IGP交互&#xff1a; 在AR…

基于SpringBoot的健身房系统的设计与实现(源码+定制+开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…