普通组件的注册-局部注册和全局注册

目录

一、局部注册和全局注册-概述

二、局部注册的使用示例

三、全局注册的使用示例


一、局部注册和全局注册-概述

组件注册有两种方式:

局部注册:只能在注册的组件内使用。使用方法:创建.vue文件,在使用的组件内导入并注册。

全局注册:所有组件内都能使用。使用方法:创建.vue文件,在main.js中进行全局注册。

这两种注册方式的区别在于:它们的使用范围不同。

二、局部注册的使用示例

在components目录中新建三个组件,如图:

然后在App.vue(我们想要使用这些组件的.vue文件,这里我们假设我们想在App.vue文件中使用这些组件)里面(<script>标签内)进行导入,如图:

组件名就是之后使用这个组件用的名字。组件对象就是导入的变量名(上图红色方框区域)。一般来讲,这两者会统一,起同一个名字。

使用方式如下图:

三、全局注册的使用示例

在components目录中创建.vue文件,如下图:

然后找到main.js文件,如下图操作:

使用方式如下图:

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

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

相关文章

【教程】极简Python接入免费语音识别API

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;请不吝给个[点赞、收藏、关注]哦~ 安装库&#xff1a; pip install SpeechRecognition 使用方法&#xff1a; import speech_recognition as srr sr.Recognizer() harvard sr…

coherence的基本概念

考虑上面这个比较简化的系统&#xff1a; 多核&#xff0c;每个核有多个线程&#xff1b;多核间存在share memory&#xff1b;每个核的多个线程&#xff0c;都可以同时对share momory进行load & store&#xff1b;每个核有自己私有的data cache&#xff1b;多核间有share的…

谷歌搜索引擎seo套餐是怎样的?

在谷歌搜索引擎优化&#xff08;SEO&#xff09;套餐方面&#xff0c;你会发现服务提供商通常提供多样化的定制服务&#xff0c;旨在满足不同业务的独特需求&#xff0c;下面一些关键点&#xff0c;帮助理解一个典型的SEO服务套餐可能包括哪些内容&#xff1a; 具体目标&#x…

引领智算变革,九章云极DataCanvas公司激活油气行业新质生产力

近日&#xff0c;“2024中国石油石化企业信息技术交流大会暨油气产业数字化转型高峰论坛”在京成功举办&#xff0c;九章云极DataCanvas公司携“油气行业AI智算服务全栈解决方案”震撼亮相&#xff0c;为油气行业数智化转型和新质生产力发展提供领先的技术视角和前瞻实战经验分…

(22)采集微信通讯录详情面板-微信UI自动化(.Net+C#)

整理 | 小耕家的喵大仙 出品 | CSDN&#xff08;ID&#xff1a;lichao19897314&#xff09; Q Q | 978124155 往期知识回顾 (1)C#开启探索微信自动化之路-微信UI自动化 (2)C#创建微信窗体自动化实例-微信UI自动化 (3)C#针对系统热键管理-微信UI自动化 (4)C#采集微信通讯录…

MoonBit 开源之夏重磅来袭!12000元奖金等你来拿!

宣讲视频 MoonBit 开源之夏宣讲视频 关于我们 开源之夏 「开源之夏 (OSPP)」是中科院软件所「开源软件供应链点亮计划」指导下的系列暑期活动&#xff0c;旨在鼓励在校学生积极参与开源软件的开发维护&#xff0c;培养和发掘更多优秀的开发者&#xff0c;促进优秀开源软件社区…

OpenSSL实现AES-CBC加解密,可一次性加解密任意长度的明文字符串或字节流(QT C++环境)

本篇博文讲述如何在Qt C的环境中使用OpenSSL实现AES-CBC-Pkcs7加/解密&#xff0c;可以一次性加解密一个任意长度的明文字符串或者字节流&#xff0c;但不适合分段读取加解密的&#xff08;例如&#xff0c;一个4GB的大型文件需要加解密&#xff0c;要分段读取&#xff0c;每次…

根据相同的key 取出数组中最后一个值

数组中有很多对象 , 需根据当前页面的值current 和 数组中的key对比 拿到返回值 数据结构如下 之前写法 const clickedItem routeList.find(item > item.key current) // current是当前页 用reduce遍历数组返回最后一个值 const clickedItem routeList.reduce((lastIte…

OpenCV 入门(七)—— 身份证识别

OpenCV 入门系列&#xff1a; OpenCV 入门&#xff08;一&#xff09;—— OpenCV 基础 OpenCV 入门&#xff08;二&#xff09;—— 车牌定位 OpenCV 入门&#xff08;三&#xff09;—— 车牌筛选 OpenCV 入门&#xff08;四&#xff09;—— 车牌号识别 OpenCV 入门&#xf…

ABAP 第二代增强-采购申请子屏幕增强

文章目录 第二代增强-采购申请子屏幕增强需求实现过程创建项目运行效果客户屏幕的PBO全局变量获取数据更新数据运行效果查询底表修改数据 第二代增强-采购申请子屏幕增强 需求 实现过程 创建项目 运行效果 客户屏幕的PBO 全局变量 *&------------------------------------…

社交媒体数据恢复:新浪微博

当我们在使用新浪微博时&#xff0c;可能会遇到一些意外情况&#xff0c;如误删微博、账号出现问题等。这时&#xff0c;我们需要进行数据恢复。本文将详细介绍如何在新浪微博中进行数据恢复。 首先&#xff0c;我们需要了解新浪微博的数据恢复功能。根据微博的帮助中心&#…

安卓跑马灯效果

跑马灯效果 当一行文本的内容太多&#xff0c;导致无法全部显示&#xff0c;也不想分行展示时&#xff0c;只能让文字从左向右滚动显示&#xff0c;类 似于跑马灯。电视在播报突发新闻时经常在屏幕下方轮播消息文字&#xff0c;比如“ 快讯&#xff1a;我国选手 *** 在刚刚结束…