【Vue】普通组件的注册使用-局部注册

文章目录

  • 一、组件注册的两种方式
  • 二、使用步骤
  • 三、练习

一、组件注册的两种方式

  1. 局部注册:只能在注册的组件内使用

    ① 创建 .vue 文件 (三个组成部分)

    以.vue结尾的组件,一般也叫做 单文件组件,即一个组件就是组件里的全部内容

    ② 在使用的组件内导入并注册

  2. 全局注册:所有组件内都能使用


二、使用步骤

步骤

  1. 创建.vue文件(三个组成部分)
  2. 在使用的组件内先导入再注册,最后使用

使用方式

当成html标签使用即可 <组件名></组件名>

注意

组件名规范 —> 大驼峰命名法, 如 HmHeader

语法

① 创建 .vue 文件 (三个组成部分)

创建是往components(注意是复数)目录里建

68222796681

② 在使用的组件内导入并注册

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {'组件名': 组件对象,// 前面是我们将来需要使用的名字,后面是导过来的变量名,一般情况下这两个会起同样的名字HmHeader:HmHeaer,HmHeader}
}

三、练习

需要备份一份src直接在空白的地方粘贴即可

image-20240131133758876

在App组件中,完成以下练习。在App.vue中使用组件的方式完成下面布局

68222790287

App.vue

<template><!-- 这个类名最好是跟当前的组件名同名 --><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter><!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode设置中搜索 trigger on tab → 勾上--></div>
</template><script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {components: {// '组件名': 组件对象// 同名的时候是可以简写的HmHeader: HmHeader,HmMain,HmFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>

HmHeader.vue

<template><!-- 在类名中,多个单词用 - 连接 --><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
</style>

HmMain.vue

<template><div class="hm-main">我是hm-main</div>
</template><script>
export default {}
</script><style>
.hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0;
}
</style>

HmFooter.vue

<template><div class="hm-footer">我是hm-footer</div>
</template><script>
export default {}
</script><style>
.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;
}
</style>

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

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

相关文章

Qt窗口与对话框

目录 Qt窗口 1.菜单栏 2.工具栏 3.状态栏 4.滑动窗口 QT对话框 1.基础对话框QDiaog 创建新的ui文件 模态对话框与非模态对话框 2.消息对话框 QMessageBox 3.QColorDialog 4.QFileDialog文件对话框 5.QFontDialog 6.QInputDialog Qt窗口 前言&#xff1a;之前以上…

Linux驱动开发笔记(三)平台设备驱动

文章目录 前言一、Linux的设备模型1. 总线1.1 bus_type结构体1.2 注册/注销总线 2. 设备2.1 device结构体2.2 内核注册/注销设备 3. 驱动3.1 device_driver结构体3.2 注册/注销驱动 4. attribute属性文件4.1 attribute_group结构体4.2 设备属性文件4.3 驱动属性文件4.3. 总线属…

数组array 和 array的区别

问题 对于数组 array和&array有什么区别呢? 先说答案 array: 指向数组第一个数地址的指针 &array: 指向整个数组地址的指针 所以直接打印的话, 地址是一样的. 但是如果1的话, 那么array是增加sizeof(int)大小, &array是增加sizeof(int) * array.size() 测试 #i…

必应bing国内广告账户如何注册推广呢?

作为全球第二大搜索引擎&#xff0c;必应Bing以其庞大的用户基础和精准的定向能力&#xff0c;为企业提供了拓展市场的绝佳平台。对于许多企业来说&#xff0c;必应Bing广告账户的注册与推广流程可能显得复杂而繁琐。此时&#xff0c;您不妨考虑携手云衔科技&#xff0c;共同开…

程序员职业素养:AI新时代下的机遇与挑战

目录 一、引言二、程序员职业素养的五大要点1. 技术能力2. 沟通能力3. 团队合作4. 责任心5. 敬业精神 三、实际案例解析四、程序员职业素养在实际工作中的应用五、AI新时代的程序员的职业发展建议六、总结七、结语 一、引言 在当今这个科技飞速发展的时代&#xff0c;程序员这…

景区ar互动大屏游戏化体验提升营销力度

从20世纪60年代的初步构想&#xff0c;到如今全球范围内无数企业的竞相投入&#xff0c;AR增强现实技术已成为引领科技潮流的重要力量。而在这一浪潮中&#xff0c;中国的AR公司正以其独特的魅力和创新力&#xff0c;崭露头角。 中国的AR市场正在迎来前所未有的发展机遇。如今&…

将现有web项目打包成electron桌面端教程(一)vue3+vite+js版

说明&#xff1a;后续项目需要web端和桌面端&#xff0c;为了提高开发效率&#xff0c;准备直接将web端的代码打包成桌面端&#xff0c;在此提前记录一下demo打包的过程&#xff0c;需要注意的是vue2或者vue3vitets或者vue-cli的打包方式各不同&#xff0c;如果你的项目不是vue…

CasaOS玩客云如何部署小雅AList并结合内网穿透远程访问海量资源

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 前言 本文主要介绍如何在安装了CasaOS的玩客云主机中部署小雅AList&#xff0c;并在AList中挂…

Ubuntu系统的k8s常见的错误和解决的问题

K8s配置的时候出现的常见问题 Q1: master节点kubectl get nodes 出现的错误 或者 解决方法&#xff1a; cat <<EOF >> /root/.bashrc export KUBECONFIG/etc/kubernetes/admin.conf EOFsource /root/.bashrc重新执行 kubectl get nodes 记得需要查看一下自己的…

【粽子大师】甜咸粽之争来看大师pick谁

概述 粽子大师是一款专门设计用来回答关于粽子制作和历史的问题的应用。无论用户是想了解甜粽还是咸粽的制作方法&#xff0c;或是希望探索粽子的地域文化差异&#xff0c;粽子大师都能提供详细的解答和指导。 功能详述 角色任务 粽子历史和文化专家: 详细了解甜咸粽子之争的…

C语言:详解gcc驱动程序完成编译、汇编、链接的过程

相关阅读 C语言https://blog.csdn.net/weixin_45791458/category_12423166.html?spm1001.2014.3001.5482 gcc是一个命令&#xff0c;严格意义上说&#xff0c;它只是一个驱动程序&#xff0c;而不是一个编译器。gcc负责调用GNU工具链中的预处理器、编译器、汇编器、链接器等工…

翻译《The Old New Thing》- What’s with this MSH_MOUSEWHEEL message?

Whats with this MSH_MOUSEWHEEL message? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080806-00/?p21353 Raymond Chen 2008年06月06日 MSH_MOUSEWHEEL 消息是怎么回事&#xff1f; 硬件团队正在研发一种鼠标滚轮设备&#xff0c;并…

matrix-breakout-2-morpheus vulnhub靶场

端口扫描 80 81 需要用户名密码登录 目录扫描 robots.txt 妹用 找不到利用点&#xff0c;换个扫描器再扫 发现新的文件 graffiti.txt graffiti.php 输入的数据Post后会回显到页面上 抓包看看&#xff0c;居然直接传文件路径 发现我们post的数据被写入了graffiti.…

yolov5-ros模型结合zed2相机部署在 Ubuntu系统

前言 本篇文章主要讲解yolov5-ros模型结合zed2相机进行实时检测&#xff0c;经改进实现了红绿灯检测&#xff0c;并输出检测类别与置信度&#xff01; 目录 一、环境配置二、zed2驱动安装三、yolov5-ros功能包配置四、运行官方权重文件四、运行自己权重文件 一、环境配置 1、…

android睡眠分期图

一、效果图 做医疗类项目&#xff0c;经常会遇到做各种图表&#xff0c;本文做的睡眠分期图。 二、代码 引入用到的库 api joda-time:joda-time:2.10.1 调用代码 /*** 睡眠* 分期*/private SleepChartAdapter mAdapter;private SleepChartAttrs mAttrs;private List<SleepI…

不会制作企业版电子书?学会这几个步骤就好啦!

公司安排你制作一本专业的电子书&#xff0c;不知道如何下手&#xff1f;别担心&#xff0c;今天LookLook同学就来给大家分享一下如何轻松制作企业版电子书。参考这几个步骤&#xff0c;相信你一定能轻松搞定&#xff01; 第一步&#xff1a;明确电子书的目标和受众 在开始制作…

zeppelin 未授权任意命令执行漏洞复现

一、命令执行复现 访问http://ip:8080&#xff0c;打开zeppelin页面&#xff0c;&#xff08;zeppelin默认监听端口在8080&#xff09; 点击Notebook->create new note创建新笔记 在创建笔记的时候选择Default Interpreter为sh&#xff0c;即可执行sh命令 如下图&#x…

最新去水印小程序源码分享/无需后台/对接接口/支持全网去水印功能

最新去水印小程序源码分享&#xff1a;无需后台、对接接口&#xff0c;支持全网去水印功能&#xff0c;经过测试发现&#xff0c;该去水印小程序的解析接口需要付费使用。如果您有免费的解析接口&#xff0c;可以自行替换原有接口。 不过&#xff0c;不论是否付费&#xff0c;…

JAVA小案例-分别计算100以内奇数和偶数的和

JAVA小案例-分别计算100以内奇数和偶数的和 没啥可说的&#xff0c;就是for循环加if分支&#xff0c;也可以用while写。 代码如下&#xff1a; public class Jiouhe {/*** 分别计算100以内奇数和偶数的和* param args*/public static void main(String[] args){int sum10;in…

老程序员学习AI大模型的焦虑与机遇

前言 在这个科技飞速发展的时代&#xff0c;AI大模型成为了编程领域的热门话题。许多人都认为&#xff0c;学习AI大模型是获取高薪职位和实现职业发展的关键。然而&#xff0c;作为一名拥有十多年编程经验的老程序员&#xff0c;我不得不承认&#xff0c;面对这一新兴技术&…