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解析前。

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

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

相关文章

FastDFS与Nginx结合搭建文件服务器,并实现公网访问【内网穿透】

文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx 2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.…

Asyncio support

Python 3.4及更高版本中内置的asyncio模块可用于在单个线程中编写异步代码。此库支持使用can.Notifier类在事件循环中异步接收消息。 每个CAN总线仍将有一个线程,但用户应用程序将完全在事件循环中执行,从而实现更简单的并发性,而无需担心线程问题。但是,具有有效文件描述…

常用的图像校正方法

在数字图像处理中&#xff0c;常用的校正方法包括明场均匀性校正、查找表&#xff08;LUT&#xff09;校正和伽玛&#xff08;Gamma&#xff09;校正。这些校正方法分别针对不同的图像问题&#xff0c;可以改善图像质量&#xff0c;提升图像的可读性和可分析性。下面是这三种校…

openpnp - 板子上最小物料封装尺寸的选择

文章目录 openpnp - 板子上最小物料封装尺寸的选择概述END openpnp - 板子上最小物料封装尺寸的选择 概述 现在设备调试完了, 用散料飞达载入物料试了一下. 0402以上贴的贴别准, 贴片流程也稳, 基本不需要手工干预. 0201可以贴, 但是由于底部相机元件视觉识别成功率不是很高…

uni-app打包后安卓不显示地图及相关操作详解

新公司最近用uni-app写app&#xff0c;之前的代码有很多问题&#xff0c;正好趁着改bug的时间学习下uni-app。 问题现象&#xff1a; 使用uni-app在浏览器调试的时候&#xff0c;地图是展示的&#xff0c;但是打包完成后&#xff0c;在app端是空白的。咱第一次写app&#xff…

docker 06(docker compose)

一、服务编排 二、docker compose

查看所有数据库各表容量大小

查看所有数据库各表容量大小 1. 查看所有数据库各表容量大小2.查看指定数据库容量大小3. 查看所有数据库容量大小 1. 查看所有数据库各表容量大小 select table_schema as 数据库, table_name as 表名, table_rows as 记录数, truncate(data_length/1024/1024, 2) as 数据容量…

Mac常见恶意软件再现,办公应用程序潜藏风险如何防范?

Mac电脑正受到臭名昭著的XLoader恶意软件的新变种的攻击&#xff0c;该恶意软件已被重写为在最好的MacBook上本地运行。 虽然XLoader至少从2015年开始出现&#xff0c;但在2021年发现macOS变体之前&#xff0c;它主要用于针对Windows PC。然而&#xff0c;该版本是作为Java程序…

解决Fastjson2 oom(Out Of Memory),支持大对象(LargeObject 1G)json操作

在使用Fastjson中的 JSON.toJSONString时,如果对象数据太大&#xff08;>64M&#xff09;会出现Out Of Memory,查看源码发现为JSONWriter中的判断代码 其中maxArraySize默认最大为64M,如果超过了就会抛出oom错误 如果fastjson过多的使用内存,也可能导致java堆内存溢出,所以这…

C++ STL无序关联式容器(详解)

STL无序关联式容器 继 map、multimap、set、multiset 关联式容器之后&#xff0c;从本节开始&#xff0c;再讲解一类“特殊”的关联式容器&#xff0c;它们常被称为“无序容器”、“哈希容器”或者“无序关联容器”。 注意&#xff0c;无序容器是 C 11 标准才正式引入到 STL 标…

Global Pollen Project: Data Access API v1

GPP API v1 Backbone12 Collection3 Taxon4567 存疑&#xff1a;不知是网站撤销了&#xff0c;还是未给出api的网址错误&#xff0c;仍无法正常访问API。 Backbone 1 请求方法请求地址请求参数请求主体类型GET/api/v1/backbone/search----application/json-patchjson 请求主…

〔015〕Stable Diffusion 之 模型管理和信息管理插件 篇

✨ 目录 &#x1f388; 模型管理&#x1f388; 添加预览图&#x1f388; 添加详细描述&#x1f388; 模型分组&#x1f388; 下载 Civitai Helper 插件&#x1f388; 插件 Civitai Helper 使用方法 &#x1f388; 模型管理 点击生成按钮下的 显示/隐藏扩展模型 Show/hide extr…

python学习-文件管理

文件管理 shutil 文件拷贝 shutil.copy(src,dst) 注&#xff1a;srcrE:\python\.vscode\文件操作 windows上运行时候&#xff0c;如果不加r&#xff0c;上述文件路径在代码运行时会报错&#xff0c;因为其会先将双引号”“去掉&#xff0c;然后系统看到了文件路径中有\nc&…

chromedriver.exe 的所有版本下载地址

Chrome for Testing availability 上面的网址是V115 v116.... 以上的。 CNPM Binaries Mirror 上面这个是V115版本以下的。 这个文章没有任何实际价值&#xff0c;记录的原因是因为突然发现过去的py无法运行&#xff0c;原因是chrome浏览器偷偷升级到V115&#xff0c;于是找…

“深入解析JVM:探索Java虚拟机的内部机制“

标题&#xff1a;深入解析JVM&#xff1a;探索Java虚拟机的内部机制 摘要&#xff1a;本篇博客将深入探索Java虚拟机&#xff08;JVM&#xff09;的内部机制。我们将介绍JVM的工作原理、内存管理、垃圾回收机制以及类加载和执行过程。此外&#xff0c;我们还将通过示例代码来帮…

(css样式穿透详解)::v-deep的使用

目录 背景 使用&#xff1a; 1、当项目中使用的 css 原生样式 &#xff0c;需要使用 >>> 深度选择器来修改 外用第三方组件的样式 2、当项目中使用的 css 扩展语言是 less&#xff0c; 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式 3、…

KMP算法(JS)

KMP算法 什么时KMP算法 KMP算法是一种改进的字符串匹配算法 由D.E.Knuth&#xff0c;J.H.Morris和 V.R.Pratt提出的&#xff0c;因此人们称它为克努特—莫里斯—普拉特操作&#xff08;简称KMP算法&#xff09;。 KMP的主要思想是当出现字符串不匹配时&#xff0c;可以知道…

机器学习|决策树:数学原理及代码解析

机器学习&#xff5c;决策树&#xff1a;数学原理及代码解析 决策树是一种常用的监督学习算法&#xff0c;适用于解决分类和回归问题。在本文中&#xff0c;我们将深入探讨决策树的数学原理&#xff0c;并提供 Python 示例代码帮助读者更好地理解和实现该算法。 决策树数学原…

C++笔记之全局函数做友元与类做友元

C笔记之全局函数做友元与类做友元 code review! 文章目录 C笔记之全局函数做友元与类做友元1.全局函数做友元2.类作友元 1.全局函数做友元 代码 #include <iostream> using namespace std;class MyClass { private:int x; public:MyClass(int a) : x(a) {}friend void…

初识Node.js

什么是node.js? node.js是一个基于chrome V8引擎的javascript运行环境 浏览器是js前端的运行环境 node是js后端的运行环境 什么是终端&#xff1f; 用于实现人机交互的方式 Windows系统有两种打开终端的方式 1.windowsR输入cmd&#xff08;旧版&#xff09; 2.在文件所处…