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.xdnf.cn/news/1297.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

大数据计算里的Broadcast Hash Join/Shuffle Hash Join/Sort Merge Join

文章目录 Broadcast Hash Join场景 Shuffle Hash Join场景 Sort Merge Join场景 Broadcast Hash Join 场景 大表和小小表&#xff0c;直接把B表加载到内存&#xff0c;然后读块1内容和内存中数据匹配 Shuffle Hash Join 场景 大表和小表JOIN &#xff0c;小表分块后能加载…

Docker打包自己项目推到Docker hub仓库(windows10)

一、启用Hyper-V和容器特性 1.应用和功能 2.点击程序和功能 3.启用或关闭Windows功能 4.开启Hyper-V 和 容器特性 记得重启生效&#xff01;&#xff01;&#xff01; 二、安装WSL2&#xff1a;写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/143057041 三…

谷粒商城のsentinelzipkin

文章目录 前言一、Sentinel1、什么是Sentinel2、项目配置3、使用案例3.1、流控3.2、降级3.3、黑白名单设置 二、Zipkin1、什么是Zipkin2、项目配置3、整合案例 前言 本篇介绍Spring Cloud Ali的sentinel组件&#xff0c;用于对微服务的熔断降级&#xff0c;以及链路追踪zipkin的…

Prism 七区域上下文关联

还是从头开始来。 1、区域上下文。 1.1、通过NuGet添加Prism.DryIoc。如下图。 1.2、新建WPF项目WpfApp1&#xff0c;创建Views和ViewModels文件夹&#xff0c;将MainWindow.xaml文件移动到 Views文件下&#xff0c;在ViewModels文件夹下添加MainWindowViewModel.cs文件。 …

UOS 安装usb wifi 网卡驱动

电脑上装安uos后发现usb网卡驱动不见了&#xff0c;网卡长下面这个样子&#xff0c;但是官方没有驱动 驱动网址选5300 https://www.ezcast.com/app/ezcast/wifi-adapter/windows 这时我们 lsusb找到相关设备&#xff0c;发现是Realtek 的设备 要在 Ubuntu 上安装 Realtek 0bda…

开放式耳机什么品牌质量好?5款排行榜里的开放式蓝牙耳机

​开放式耳机目前非常流行&#xff0c;它们以时尚、美观和舒适著称&#xff0c;迅速赢得了众多用户的喜爱&#xff0c;成为了耳机市场的新宠。与传统的入耳式耳机相比&#xff0c;开放式耳机佩戴更稳固&#xff0c;对耳朵也更为温和。尽管有些人认为它们价格不菲&#xff0c;甚…

二:Linux学习笔记(第一阶段)-- Linux命令

目录 Linux注意事项&#xff1a; Linux目录 Linux系统基础命令 1. 文件和目录操作 2. 文件查看和编辑 3. 文件权限和所有权 4. 系统信息 5. 网络命令 6. 文件查找 7. 压缩和解压缩 8. 系统管理 Linux注意事项&#xff1a; 严格区分大小写一切皆文件windows下的程序不…

【网络】Wireshark工具介绍和下载地址

https://www.wireshark.org/ 下载地址 介绍地址 Wireshark is a network protocol analyser. It can be used to capture packets from a network connection. Wireshark是一个网络协议分析器。它可以用来捕获来自网络连接的数据包。 1.1. What is Wireshark? Wireshark is…

CSS例子: 横向排列的格子

效果 HTML <view class"content"><view class"item" v-for"item of 5">{{item}}</view></view> CSS .content {height: 100vh;display: flex;flex-direction: row; flex-wrap: wrap;align-content: flex-start;backgro…

STM32的TIM中Prescaler和ClockDivision有什么用以及计数器溢出时间计算

我们在stm32中需要使用到时钟&#xff0c;在设置时容易把Prescaler和ClockDivision混淆&#xff0c;为什么有时候ClockDivision不需要设置呢&#xff1f;一下是解释&#xff1a; 1. Prescaler&#xff08;预分频器&#xff09; 功能&#xff1a;Prescaler 的作用是降低定时器的…

A011-基于SpringBoot的视频点播系统设计与实现

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装视频点播系统软件来发挥其高效地信息处理的作用&#xff0c…

高阶数据结构--图(graph)

图&#xff08;graph&#xff09; 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…

MySQL FIND_IN_SET 函数详解

文章目录 1. 基本语法2. 使用场景3. 实战示例3.1 基础查询示例3.2 与其他函数结合使用3.3 动态条件查询 4. 性能考虑5. 常见问题和解决方案5.1 大小写敏感问题5.2 空值处理5.3 模糊匹配 6. 总结 1. 基本语法 FIND_IN_SET 函数的基本语法如下&#xff1a; FIND_IN_SET(str, st…

AI产品经理全攻略:策略制定、开发过程与商业化路径【AI产品经理必读书籍】

通过《AI产品经理手册》&#xff0c;将可以了解不同类型的AI&#xff0c;如何将AI整合到产品或业务中&#xff0c;以及支持创建AI产品或将AI集成到现有产品所需的基础设施。熟悉实践管理AI产品开发流程、评估和优化AI模型&#xff0c;以及应对与AI产品相关的复杂伦理和法律问题…

Unity3D UI 拖拽

Unity3D 实现 UI 元素拖拽功能。 UI 拖拽 通常画布上的 UI 元素都是固定位置的&#xff0c;我们可以通过实现拖拽接口&#xff0c;让 UI 元素可以被拖拽到其他位置。 拖拽接口 创建一个脚本 UIDrag.cs&#xff0c;在默认继承的 MonoBehaviour 后面&#xff0c;再继承三个接…

RHCE: DNS服务器

一.DNS简介及其相关 提供DNS服务的软件叫bind&#xff0c;服务名是named。 1) DNS简介 DNS&#xff08;Domain Name System&#xff09;是互联网上的一项服务&#xff0c;它作为将域名和IP地址相互映射的一个分布式 数据库&#xff0c;能够使人更方便的访问互联网。 post: 53 …

Linux脚本(if、else、case、test中括号)

文章目录 if else 值比较if 逻辑测试if testif [] 与[[]]if字符串比较校验if文件校验case基本结构case字符串case或(|)case通配符case 通配符组合使用 if else 值比较 注意:if []中两边有空格&#xff0c;if和中括号之间也有空格&#xff0c;变量两边无空格 比较符号说明-eq等…

WPF+MVVM案例实战(十六)- 实现一个下拉式菜单(下)

文章目录 1、案例效果2、二级有子项菜单样式实现3、样式整理汇整4、菜单事件触发5、源代码下载1、案例效果 2、二级有子项菜单样式实现 分析菜单面板如下所示: 他其实和一级菜单有子项类似,只是指示箭头和弹出面板的位置不一样,一级菜单是底部弹出,二级菜单是右侧弹出。理…

C#二分查找算法

前言 二分查找算法是一种在有序数组中查找特定元素的搜索算法。 实现原理 二分查找的实现依赖于以下几个关键步骤&#xff1a; 计算查找范围的中间索引。 比较中间索引处的值与目标值。 根据比较结果调整查找范围&#xff08;左半部分或右半部分&#xff09;。 重复上述步…

WPF+MVVM案例实战(十五)- 实现一个下拉式菜单(上)

文章目录 1 案例效果2、图标资源下载3、功能实现1.文件创建2、菜单原理分析3、一级菜单两种样式实现1、一级菜单无子项样式实现2、一级菜单有子项样式实现 4、总结 1 案例效果 提示 2、图标资源下载 从阿里矢量素材官网下载需要的菜单图片&#xff0c;如下所示&#xff1a; …