vue组件注册可以是以下哪种方式,vue3注册组件
本文主要介绍vue组件注册的相关信息，帮助你更好的了解和学习vue组件的相关知识。感兴趣的朋友可以了解一下。
一、了解组件注册的两种方式
1.1全局组件的注册方法
//main.js
从“vue”导入Vue
从导入应用程序。/App
从导入路由器。/路由器
Vue.config.productionTip=false
让你好={
姓名：你好，
模板：“这是全局组件hello”
}
Vue.component(hello ，hello)
新Vue({
埃尔： #app ，
路由器，
组件：{ App }，
模板：“”
})
上面我们通过Vue.component()注册了一个全局组件hello，然后基于这个例子分析了源代码实现。
1.2本地组件的注册
模板
div id=应用程序
img src=。/assets/logo.png
HelloWorld/
/div
/模板
脚本
从导入HelloWorld。/components/HelloWorld.vue
导出默认值{
名称：“应用程序”，
组件：{
编译
}
}
/脚本
这样就注册了HelloWorld的一个本地组件。
二、全局组件注册的源码
1.当1。Vue被初始化，initGlobalAPI()将被调用
//[代码块1]
//代码所在的文件：src/core/global-api/index.js
导出函数initGlobalAPI(Vue: GlobalAPI){
//.省略其他无关代码。
初始资产注册(Vue)
//此方法是用于组件注册的方法。
}
2.执行initAssetRegisters()方法中组件的定义。
//[代码块2]
//代码所在的文件：src/core/global-API/assets.js。
导出函数initAssetRegister(Vue){
ASSET_TYPES.forEach(type={
//ASSET_TYPES包括组件、指令和过滤器。
Vue[type]=函数(id，定义){
//.一些条件判断
if(type===component 是一个声明对象(定义)){
定义.名称=定义.名称 id
definition=this . options . _ base . extend(definition)
//将定义转换为从Vue继承的构造函数
}
//.其他类型的处理
this . options[type s ][id]=definition//在Vue.options.components上安装此构造函数
退货定义
}
})
}
此时，我们可以浏览上面的示例，看看最初的定义是什么，以及Vue.options挂载后是什么样子：
a .定义：其实传入的时候就是我们一开始定义的全局组件的具体内容。
B.Vue.options:您可以看到我们定义的全局组件hello已经存在于Vue.options.components上
3.当实例化一个组件时，代码将在Vue.prototype._init()上执行
//[代码块3]
//代码文件：src/core/instance/init.js
vue . prototype . _ init=function(options){
//.省略其他无关代码。
If(选项选项。_ is component){//组件
initInternalComponent(虚拟机，选项)
}else{ //非组件
vm。$options=mergeOptions(
resolveConstructorOptions(VM . constructor)，
选项{}，
伏特计
)
}
}
这里，自定义组件的选项与Vue.options合并，并分配给vm。$options，而通过[代码块2]我们可以知道全局组件的构造函数已经放在Vue.options.components上了，所以这一步之后，全局组件的构造函数也在VM上了。$ options.components .所以现在您可以在任何组件中获取全局组件，因为这种合并将在任何组件初始化时执行。
我们可以浏览上面的例子，看看当前虚拟机上有什么。$options。
4.在创建vnode的过程中，会执行_createElement方法。
//[代码块4]
//代码文件：src/core/vdom/create-element . js
export function _createElement(上下文、标记、数据、子项、规范化){
if(typeof标记===string){
//.
if(config.isReservedTag(tag)){
//.保留的html标记
} else if(isDef(Ctor=resolve asset(context。$options， component ，tag))){
//已经注册的全局组件
vnode=createComponent(Ctor，data，context，children，tag)
}否则{
//如果不是内置标签或者注册的组件，创建一个全新的vnode。
vnode=新的vnode(
标签、数据、孩子，
未定义，未定义，上下文
)
}
}
}
上面的代码中有一个重要的方法resolveAsset()，用来判断在context上是否可以找到这个组件的构造函数。$ options.compononts(即vm。$options.components)。如果可以找到，返回这个构造函数，(具体方法见【代码块5】。)根据【代码块3】我们可以知道，如果这个组件是全局注册的，那么我们就可以得到这个构造函数，输入这个else if判断，通过createComponent()得到vnode。
5.以上四个步骤已经实现了全流程。现在看一下resolveAsset()
//[代码块5]
//代码所在的文件：src/core/utils/options.js
导出函数resolveAsset(选项，类型，id，warnMissing){
//options是上下文。上面调用时传入的$options，
//by[代码块3]，vm。$options是我们的自定义选项和Vue上的选项的组合。
//类型现在是组件。
const assets=options[type]
//首先检查本地注册变化
if (hasOwn(assets，id))返回assets[id]
const camelizedId=camelize(id)
if (hasOwn(assets，camelizedId))返回资产[camelizedId]
const PascalCaseId=大写(camelizedId)
if (hasOwn(assets，PascalCaseId))返回资产[PascalCaseId]
//回退到原型链
const RES=assets[id] assets[camelizedId] assets[PascalCaseId]
if (process.env.NODE_ENV！==生产警告缺失！res) {
警告(
无法解析“type.slice(0，-1)”id，
选择
)
}
返回资源
}
先通过const assets=options[type]获取资产，再尝试获取资产[id]。这是命令。第一，直接用id。如果不存在，就把id变成驼峰再拿。如果还是不存在，那就在驼峰的基础上把首字母变成大写字母再取。如果还是拿不到，就报错。这表明当我们使用Vue.component(id，definition)全局注册组件时，id可以用连字符连接，驼峰式连接或大写。
三、局部组件的注册
1 .扩展()
组件执行render()时，会执行createComponent函数，其中会执行extend()函数生成构造函数。也是在这个extend()函数中执行选项合并。
//[代码块5]
//代码所在的文件：src/core/global-api/extend.js。
vue . entend=function(extend options){
//.
子选项=合并选项(
Super.options，Vue的选项
ExtendOptions //定义组件的对象
)
//.
}
可以看到，在这里，你传入的选项(也就是定义组件的对象)与Vue.options合并，然后放在sub.options上，同时，因为Vue的选项合并在sub.options上，你也可以在组件中得到全局注册的组件。
2.组件初始化
//[代码块6(与代码块3相同)]
//代码文件：src/core/instance/init.js
vue . prototype . _ init=function(options){
//.
if(选项选项。_isComponent){
initInternalComponent(虚拟机，选项)
}否则{
vm。$options=mergeOptions(
resolveConstructorOptions(VM . constructor)，
选项{}，
伏特计
)
}
}
在组件初始化过程中，if判断语句将被输入，并且initInternalComponent()将被执行。
3.initInternalComponent()
//[代码块7]
//代码文件：src/core/instance/init.js
导出函数initinternal Component(VM:Component，options:internal Component options){
const opts=vm。$ options=object . create(VM . constructor . options)
//vm.constructor是Sub。在代码块5中，我们将本地组件放在子选项上
//所以在这里，本地组件的构造函数放在vm上。$选项
//这样，在执行[代码块4]时，也可以通过resolveAsset获取本地注册组件的构造函数。
const parentVnode=options。_parentVnode
opts.parent=options.parent
opts。_parentVnode=parentVnode
//将componentOptions中的其他属性分配给opts
const vnode component options=parent vnode . component options
opts . props data=vnodecomponentoptions . props data
opts。_ parent listeners=vnodecomponentoptions . listeners
opts。_ render children=vnodecomponentoptions . children
opts。_ component tag=vnodecomponentoptions . tag
if (options.render) {
opts.render=options.render
opts . staticrenderfns=options . staticrenderfns
}
}
四、总结
由于全局注册的组件将组件的构造函数扩展为Vue.options.components，并且在组件初始化时，会将自己的选项与Vue.options合并，扩展到vm。$options.components，因此全局组件可以在任何组件中使用。本地注册的组件将组件的构造器扩展到vm。$options.components，所以它只能在当前组件中使用。
以上是vue组件注册的详细内容。更多关于vue组件注册的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。