当前位置: 首页 > news >正文

Vue 2 组件注册

组件名的命名规则

定义组件名的两种方式:

  1. 短横线分隔命名,Kebab Case,例如my-component-name
  2. 单词首字母大写命名,Pascal Case,例如MyComponentName

第一种方式在模板中使用<my-component-name>引用该元素,第二种方式可以使用<my-component-name><MyComponentName>


全局注册和局部注册

在组件基础一文中我们提到Vue.component这种组件注册方式是全局注册的。全局注册意味着它们可以在其他Vue实例中直接使用。

但有时对于某个全局注册的组件,我们并不是很频繁地使用,或者我们不再需要这个组件,但它仍会被包含在构建结果中。

于是我们可以采用局部注册的方式。

不采用模块系统的局部注册:

<div id="app"><component-a></component-a>
</div>
<script>var ComponentA = {template: '<div>Component A</div>'};new Vue({el: '#app',components: {'component-a': ComponentA},});
</script>

如果你通过 Babel 和 webpack 使用 ES2015 模块,可以像下面这样进行局部注册:

import ComponentA from './ComponentA'export default{components:{ComponentA //ComponentA:ComponentA的缩写}
}

当然,在模块化系统中,我们也可以进行全局注册,除了使用之前提到的Vue.component,还可以在使用了webpack或Vue CLI 3+的前提下,使用require.context进行全局注册:

main.js

import Vue from 'vue'
import App from './App.vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'const requireComponent=require.context('./components',//基础组件相对路径false,//是否递归查询其子目录/Base[A-Z]\w+.(vue|js)$/ //基础文件名的正则表达式
)requireComponent.keys().forEach(fileName=>{//获取组件配置const compoentConfig=requireCompoennt(fileName)//获取组件的PascalCase命名const componentName=upperFirst(//大写首字母camelCase(//转换字符串string为驼峰写法//获取与目录深度无关的文件名fileName.split('/').pop().replace(/\.\w+$/,'')))//全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先使用 `.default`,// 否则回退到使用模块的根。componentConfig.default || componentConfig)
})//阻止Vue在启动时生成生产提示,如下:
//You are running Vue in development mode.
//Make sure to turn on production mode when deploying for production.
//See more tips at https://vuejs.org/guide/deployment.html
Vue.config.productionTip=falsenew Vue({//从App提供的模板编译渲染函数//h代指createElement方法,接收根组件App来创建VNoderender:h=>h(App)
}).$mount('#app') //手动挂载

Vue.component用于全局注册单个组件,上面方法用于全局注册多个组件,所以会多次调用Vue.component方法。


额外话题

作者发现了Vue.config.productionTip=false在某些位置不生效的情况。

实际上观察Vue检查denvtools插件安装情况和开发模式的类型的源码部分可发现:

var inBrowser = typeof window !== "undefined";....
....// devtools global hook
/* istanbul ignore next */
if (inBrowser) {setTimeout(function () {if (config.devtools) {if (devtools) {devtools.emit('init', Vue);} else {console[console.info ? 'info' : 'log']('Download the Vue Devtools extension for a better development experience:\n' +'https://github.com/vuejs/vue-devtools');}}if (config.productionTip !== false &&typeof console !== 'undefined') {console[console.info ? 'info' : 'log']("You are running Vue in development mode.\n" +"Make sure to turn on production mode when deploying for production.\n" +"See more tips at https://vuejs.org/guide/deployment.html");}}, 0);
}

Vue.config.productionTip=false应该在inBrowsertrue时就已经被设置好,而inBrowser表示当前是否是浏览器环境,它通过检测window对象是否存在来判断,window对象在页面被渲染后定义。所以,Vue.config.productionTip设置时机是在页面渲染前。body中的script标签是在body解析完后才执行的。换言之,Vue.config.productionTip设置时机是在body解析前。

相关文章:

Vue 2 组件注册

组件名的命名规则 定义组件名的两种方式&#xff1a; 短横线分隔命名&#xff0c;Kebab Case&#xff0c;例如my-component-name。单词首字母大写命名&#xff0c;Pascal Case&#xff0c;例如MyComponentName。 第一种方式在模板中使用<my-component-name>引用该元素…...

学习游戏开发引擎,打造梦想中的虚拟世界!

游戏开发引擎是游戏开发过程中的关键工具&#xff0c;它们提供了开发者所需的各种功能和资源&#xff0c;加速了游戏的制作过程。以下是一些常用的游戏开发引擎以及它们的优势&#xff1a; Unity&#xff08;Unity3D&#xff09;&#xff1a; 优势&#xff1a; Unity 是目前最…...

AI搜索引擎助力科学家创新

开发者希望通过帮助科学家从大量文献中发现联系从而解放科学家&#xff0c;让他们专注于发现和创新。 图片来源&#xff1a;The Project Twins 对于专注于历史的研究者Mushtaq Bilal来说&#xff0c;他在未来科技中投入了大量时间。 Bilal在丹麦南部大学&#xff08; Universit…...

神经网络基础-神经网络补充概念-50-学习率衰减

概念 学习率衰减&#xff08;Learning Rate Decay&#xff09;是一种优化算法&#xff0c;在训练深度学习模型时逐渐减小学习率&#xff0c;以便在训练的后期更加稳定地收敛到最优解。学习率衰减可以帮助在训练初期更快地靠近最优解&#xff0c;而在接近最优解时减小学习率可以…...

android.system.ErrnoException: open failed: EPERM (Operation not permitted)

android 10(Q)开始增加了沙盒机制&#xff0c;不能直接把文件保存到/sdcard目录下&#xff0c;只能保存到APP专属目录下&#xff1b;AndroidManifest.xml在标签下增加属性【android:requestLegacyExternalStorage“true”】可以暂时保存到/sdcard路径下&#xff0c;但是Android…...

基于 KubeSphere 的应用容器化在智能网联汽车领域的实践

公司简介 某国家级智能网联汽车研究中心成立于 2018 年&#xff0c;是担当产业发展咨询与建议、共性技术研发中心、创新成果转化的国家级创新平台&#xff0c;旨在提高我国在智能网联汽车及相关产业在全球价值链中的地位。 目前着力建设基于大数据与云计算的智能汽车云端运营…...

面试之ReentrantLock

一&#xff0c;ReentrantLock 1.ReentrantLock是什么&#xff1f; ReentrantLock实现了Lock接口&#xff0c;是一个可重入且独占式的锁&#xff0c;和Synchronized关键字类似&#xff0c;不过ReentrantLock更灵活&#xff0c;更强大&#xff0c;增加了轮询、超时、中断、公平锁…...

系统学习Linux-MongoDB

概述 mongodb是一个nosql数据库&#xff0c;它有高性能、无模式、文档型的特点。是nosql数据库中功能最丰富&#xff0c;最像关系数据库的。数据库格式为BSON 相关概念实例&#xff1a;系统上运行的mongodb的进程&#xff0c;类似于mysql实例&#xff1b;库&#xff1a;每个数…...

【带着学Pytorch】2、张量(Tensor)的介绍与创建

一、Tensor介绍 1.1、 张量是什么? 最开始在出现CPU和GPU, GPU出现主要解决的问题时并行计算,在此基础上的软件层面的工作基本上围绕着并行计算进行的,张量也不例外。 首先,我们先来聊聊 编程语言,python,java ,C,C++等,他们都有的共同特点是什么?在大学中计算机类…...

UniApp 制作高德地图插件

1、下载Uni插件项目 在Uni官网下载Uni插件项目&#xff0c;并参考官网插件项目创建插件项目. 开发者须知 | uni小程序SDK 如果下载下来项目运行不了可以参考下面链接进行处理 UniApp原生插件制作_wangdaoyin2010的博客-CSDN博客 2、引入高德SDK 2.1 在高德官网下载对应SD…...

C# 图像处理之灰色图转化为RGB图像

咨询通义千问的“C# 图像处理之灰色图转化为RGB图像”结果&#xff0c;看看如何&#xff1a; 在C#中&#xff0c;可以使用Image类来处理图像。要将灰色图像转换为RGB图像&#xff0c;可以按照以下步骤进行操作&#xff1a; 1.创建一个灰色图像对象。 Image grayImage Imag…...

从零实战SLAM-第八课(非特征点的视觉里程计)

在七月算法报的班&#xff0c;老师讲的蛮好。好记性不如烂笔头&#xff0c;关键内容还是记录一下吧&#xff0c;课程入口&#xff0c;感兴趣的同学可以学习一下。 --------------------------------------------------------------------------------------------------------…...

Azure使用CLI创建VM

使用CLI创建VM之前&#xff0c;确保资源中的IP资源已经释放掉了&#xff0c;避免创建的过程中没有可以利用的公共IP地址打开 cloudshell ,并输入创建CLI的命令如下&#xff0c;-n指定名称&#xff0c;-g指定资源组&#xff0c;image指定镜像&#xff0c;admin-usernam指定用户名…...

Rust: 聊聊AtomicPtr<()>和 *const ()

在Bytes库在github源码&#xff08;https://docs.rs/bytes/1.1.0/src/bytes/bytes.rs.html#94-100&#xff09;有关Bytes的定义中&#xff0c; pub struct Bytes {ptr: *const u8,len: usize, // inlined "trait object"data: AtomicPtr<()>, vtable: &st…...

公网远程连接Redis数据库详解

文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 前言 洁洁的个人主页 我就问你有没有发挥&#xff0…...

天津报web前端培训班一定要选贵的吗?

根据这几年数据显示&#xff0c;IT行业飞速发展&#xff0c;岗位需求增多&#xff0c;Web前端是个很新的职业&#xff0c;在国内乃至国际上真正开始受到重视的时间不超过五年&#xff0c;Web前端开发是从网页制作演变而来&#xff0c;名称是有很明显的时代特性。 Web前端就业形…...

iptables学习笔记

iptables的结构&#xff1a; iptables由上而下&#xff0c;由Tables&#xff0c;Chains&#xff0c;Rules组成。 一、iptables的表tables与链chains iptables有Filter, NAT, Mangle, Raw四种内建表&#xff1a; 1. Filter表 Filter是iptables的默认表&#xff0c;它有以下…...

Express 实战(一):概览

在正式学习 Express 内容之前&#xff0c;我们有必要从大的方面了解一下 Node.js 。 在很长的一段时间里&#xff0c;JavaScript 一门编写浏览器中运行脚本的语言。不过近些年&#xff0c;随着互联网的发展以及技术进步&#xff0c;JavaScript 迎来了一个集中爆发的时代。一个…...

SpringBoot中的可扩展接口

目录 # 背景 # 可扩展的接口启动调用顺序图 # ApplicationContextInitializer # BeanDefinitionRegistryPostProcessor # BeanFactoryPostProcessor # InstantiationAwareBeanPostProcessor # SmartInstantiationAwareBeanPostProcessor # BeanFactoryAware # Applicati…...

中大型无人机远程VHF语音电台系统方案

方案背景 中大型无人机在执行飞行任务时&#xff0c;特别是在管制空域飞行时地面航管人员需要通过语音与无人机通信。按《无人驾驶航空器飞行管理暂行条例》规定&#xff0c;中大型无人机应当进行适航管理。物流无人机和载人eVTOL都将进行适航管理&#xff0c;所以无人机也要有…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...