[07] 组件注册

目录

    • Vue.js 组件
    • 局部注册
    • 全局注册

Vue.js 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

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

局部注册

  • 特点:只能在注册的组件内使用

  • 步骤:

    1. 创建.vue文件(三个组成部分)
    2. 在使用的组件内先导入再注册,最后使用
  • 使用方式:当成html标签使用即可 <组件名></组件名>

  • 使用大驼峰命名法, 如 HmHeader

5.语法

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {     // 局部注册components: {'组件名': 组件对象,HmHeader:HmHeaer,HmHeader}
}

全局注册

  • 特点:全局注册的组件,在项目的任何组件中都能使用

  • 步骤

    1. 创建.vue组件(三个组成部分)
    2. main.js中进行全局注册
  • 使用方式:当成HTML标签直接使用

<组件名></组件名>

  • 大驼峰命名法, 如 HmHeader

  • 语法

Vue.component('组件名', 组件对象)

Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,使用以下方式来调用组件:
<tagName></tagName>

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

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

相关文章

为什么很多人选用QT开发,有哪些应用实例?

在软件开发领域&#xff0c;Qt框架作为一种跨平台的C应用程序开发框架&#xff0c;近年来受到越来越多开发者的青睐。这主要得益于其卓越的跨平台性能、丰富的功能库、开发效率以及社区支持。以下将通过详实的分析&#xff0c;从不同角度探讨为什么很多人改用QT开发&#xff0c…

低代码开发:学校低成本数字化转型的新引擎

随着科技的飞速发展&#xff0c;数字化转型已经成为教育行业的一大趋势。然而&#xff0c;对于许多学校来说&#xff0c;高昂的数字化改造成本成为了一道难以逾越的门槛。本文将探讨如何通过低代码开发&#xff0c;以低成本实现学校数字化转型&#xff0c;为教育行业注入新活力…

力扣热题100_子串_560_和为 K 的子数组

文章目录 题目链接解题思路解题代码 题目链接 560.和为 K 的子数组 解题思路 1.定义变量count&#xff08;计算个数&#xff0c;返回值&#xff09;为0、n&#xff08;当前nums长度&#xff09;、preSums&#xff08;利用利用defaultdict的特性&#xff0c;当presum-k不存在…

list.stream().forEach()和list.forEach()的区别

list.stream().forEach() 和 list.forEach() 在 Java 中都是用于遍历集合元素的方法&#xff0c;但它们在使用场景和功能上有所不同&#xff1a; list.forEach()&#xff1a; 是从 Java 8 开始引入到 java.util.List 接口的标准方法。直接对列表进行迭代&#xff0c;它采用内部…

力扣645. 错误的集合(排序,哈希表)

Problem: 645. 错误的集合 文章目录 题目描述思路复杂度Code 题目描述 思路 1.排序 1.对nums数组按从小到大的顺序排序; 2.遍历数组时若判断两个相邻的元素则找到重复元素&#xff1b; 3.记录一个整形变量prev一次置换当前位置元素并与其作差&#xff0c;若差等于2着说明缺失的…

Mysql索引操作

1、索引语法 2、慢查询日志 慢查询日志记录了所有执行时间超过指定参数&#xff08; long_query_time &#xff0c;单位&#xff1a;秒&#xff0c;默认 10 秒&#xff09;的所有 SQL 语句的日志。 MySQL 的慢查询日志默认没有开启&#xff0c;我们可以查看一下系统变量 slo…

MySQL数据库备份与还原批处理脚本

数据库备份文件&#xff0c;例如保存为&#xff1a;dump_msyql.bat REM 数据库备份 echo offREM 激活延迟环境变量扩展&#xff0c;防止变量赋值丢失 setlocal enabledelayedexpansionREM 获取当天时间 set today%date:~8,2%REM 大前天&#xff0c;当天-3天&#xff0c;小于10…

包装类日期日历类

一(Date类)&#xff1a; 在JDK的java.util包中&#xff0c;提供了Date类用于表示日期和时间&#xff0c;精确到毫秒。随着JDK版本的不断升级和发展&#xff0c;Date类中的大部分构造方法和普通方法都已经不推荐使用。在JDK8中&#xff0c;Date类只有2个构造方法可以使用&#x…

【LeetCode】升级打怪之路 Day 02:有序数组平方 滑动窗口法

今日题目&#xff1a; 977. 有序数组的平方 | LeetCode209. 长度最小的子数组 | LeetCode76. 最小覆盖子串 | LeetCode59. 螺旋矩阵 II | LeetCode 目录 今日总结Problem 1&#xff1a;有序数组平方 ⭐⭐⭐Problem 2&#xff1a;滑动窗口法 【必会】LeetCode 209. 长度最小的子…

怎样提取WPS文档的目录?

怎样提取WPS文档的目录&#xff08;智能识别目录&#xff09;&#xff1f; 1. 将你的WPS文档打开&#xff0c;菜单&#xff1a;文件&#xff1a;输出为PDF&#xff0c;另存为(.pdf) 2. PyPDF2 从PDF文件中提取目录 运行 python pdf_read_dir.py 你的PDF文件 或者 java : pd…

【2024软件测试面试必会技能】Appium自动化(5):元素定位工具

常用元素定位工具使用 uiautomatorviewer定位工具&#xff1a; 元素定位主要用来获取元素信息&#xff0c;获取元素信息后才能用appium提供的相关API去识别和操作元素。 谷歌在AndroidSDK中&#xff0c;提供了元素定位工具uiautomatorviewer&#xff0c;该工具可在android-s…

系统学习Python——装饰器:类装饰器-[跟踪对象接口:基础知识]

分类目录&#xff1a;《系统学习Python》总目录 文章《系统学习Python——装饰器&#xff1a;类装饰器-[单例类&#xff1a;基础知识]》的单例示例阐明了如何使用类装饰器来管理一个类的所有实例。类装饰器的另一个常用场景是为每个生成的实例扩展接口。类装饰器基本上可以在实…

三opencv源码解压及环境变量配置

1.双击opencv-3.4.6-vc14-vc15.exe 2.选择解压的路径&#xff0c;点击【extract】 3.设计环境变量

从零学习Linux操作系统第二十七部分 shell脚本中的变量

一、什么是变量 变量的定义 定义本身 变量就是内存一片区域的地址 变量存在的意义 命令无法操作一直变化的目标 用一串固定的字符来表示不固定的目标可以解决此问题 二、变量的类型及命名规范 环境级别 export A1 在环境关闭后变量失效 退出后 关闭 用户级别&#xff…

《初阶数据结构》尾声

目录 前言&#xff1a; 《快速排序&#xff08;非递归&#xff09;》: 《归并排序》&#xff1a; 《归并排序&#xff08;非递归&#xff09;》&#xff1a; 《计数排序》&#xff1a; 对于快速排序的优化&#xff1a; 分析&#xff1a; 总结&#xff1a; 前言&#xff1a…

新疆营盘古城及古墓群安防舱体实施方案

3 总体布局 3.1设计原则 3.1.1执行有效的国家标准、国家军用标准和行业标准&#xff1b; 3.1.2满足指标要求&#xff1b; 3.1.3采用通用化、模块化设计&#xff0c;提高设备可维修性&#xff1b; 3.1.4采用人机工程学知识进行设计&#xff0c;充分考虑安全性。 3.2 总体…

Double-DQN算法

Double-DQN算法的原理简介、与DQN对比等。 参考深度Q网络进阶技巧 1. 原理简介 在DQN算法中&#xff0c;虽然有target_net和eval_net&#xff0c;但还是容易出现Q值高估的情况&#xff0c;原因在于训练时用通过target_net选取最优动作 a ⋆ argmax ⁡ a Q ( s t 1 , a ; w…

51单片机学习(3)-----独立按键控制LED的亮灭状态

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步了。 目录 一. 器件介绍及实验原理 1.独立按键 &#xff08;1&#xff09;独…

react 实现路由拦截

简单介绍下项目背景&#xff0c;我这里做了一个demo&#xff0c;前端使用mock数据&#xff0c;然后实现简单的路由拦截&#xff0c;校验session是否包含用户作为已登录的依据&#xff0c;react-router-dom是v6。不像vue可以设置登录拦截beforeenter&#xff0c;react需要我们自…

外包干了3个月,技术退步明显

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…