【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,一经查实,立即删除!

相关文章

分享一款提取抖音小店商家电话的软件使用教程

抖音作为一款国内非常流行的短视频分享平台&#xff0c;吸引了大量用户和商家。许多商家在抖音上开设了小店&#xff0c;但是抖音并没有提供直接获取商家电话的功能。本文将分享一款提取抖音小店商家电话的软件&#xff0c;并附带使用教程和代码。 教程 步骤一&#xff1a;安…

Qt窗口与对话框

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

自定义指令:Vue允许注册全局或组件级的自定义指令,以实现对常规DOM元素的复杂操作

简介 Vue自定义指令的概念 在Vue.js中,指令(Directives)是一些预定义的特殊属性,它们以v-为前缀,用于对DOM元素进行一些特殊的操作。而自定义指令则是用户自己定义的一种特殊功能,它可以像Vue内置的指令一样使用,以达到复用和模块化的目的。 自定义指令提供了一种机制,…

单双目视频转图片

视频转图片 视频转图片 输入文件夹路径&#xff0c;里面时mp4视频 输出的是每隔1秒提取到的视频帧 interval是每隔多少秒保存一张图片 import cv2 import osimg_count 1def save_frames(video_path, output_folder, interval):# 创建保存图片的文件夹if not os.path.exists(ou…

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…

printf(“不喝酒就没得朋友可是只要偶一喝酒就喝倒一代朋友人生真的很矛盾“);

/*无线通讯语言模块测试PAST 2019 12 28 L298 CODE1871**/ #include <REG52.H> #include <intrins.H> #include "stdio.h" #define uint unsigned int #defi…

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

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

一篇文章告诉你为什么要考TOGAF证书?

TOGAF&#xff08;The Open Group Architecture Framework&#xff09;是一种被广泛应用于企业架构领域的框架和方法论。TOGAF证书作为对TOGAF知识体系的认可架构师群体中受喜爱。本文将探讨为什么TOGAF证书如此受欢迎&#xff0c;并解释其在企业架构中的重要性。 TOGAF证书的…

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

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

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

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

AI时代的浪潮

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经从科幻概念变为现实&#xff0c;深刻地影响着我们的工作和生活。在这个AI时代&#xff0c;我们将通过十个具有代表性的网站链接&#xff0c;一同探索AI技术的广泛应用和未来发展。 一、AI与人力资源管理…

展锐8541E配置USB ACM

1、kernel config 参考如下修改 cd bsp source build/envsetup.sh lunch 34 kuconfig -> Device Drivers ---> USB support ---> USB Gadget Support ---> [*] Abstract Control Model (CDC ACM)--- kernel/kernel4.14/arch/arm/configs/sprd_sharkle_defc…

将现有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 记得需要查看一下自己的…

为什么RPC要比Http高效?

RPC和HTTP RPC&#xff08;Remote Procedure Call&#xff09;基于TCP连接通常比HTTP在性能上要高很多&#xff0c;原因如下&#xff1a; 1. 协议开销 HTTP开销&#xff1a; HTTP协议报文头部相对较大&#xff0c;包含大量的元数据&#xff08;如方法、URI、头字段等&#x…

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

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

【实用技巧】Unity的Button组件使用技巧

Unity的Button组件是构建交互式用户界面的强大工具。以下是一些使用Button组件的技巧&#xff0c;可以帮助你提高开发效率和用户体验&#xff1a; 1. **使用Button的OnClick事件**&#xff1a; - 利用OnClick()事件来触发函数&#xff0c;这是响应用户点击的最简单方式。 …

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

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