注册vue组件的方法有哪些

　　介绍

注册vue组件的方法有哪些?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>一、了解组件注册的两种方式

1.1全局组件的注册方法

//main.js 　　从& # 39;进口Vue Vue # 39; 　　从& # 39;进口程序。/应用# 39; 　　从& # 39;进口路由器。/路由器# 39; 　　Vue.config。productionTip=false 　　 　　让你好={ 　　名称:& # 39;你好# 39; 　　模板:& # 39;这是全局组件你好# 39; 　　} 　　Vue.component(& # 39;你好# 39;,你好) 　　新Vue ({ 　　艾尔:& # 39;#应用# 39; 　　路由器, 　　组件:{应用}, 　　模板:& # 39;& # 39; 　　})

上面我们就通过Vue.component()注册了一个全局组件你好,接下来分析源码实现的时候也是基于这个例子来进行的。

1.2局部组件的注册

 & lt; template>
　　& lt; div id=癮pp"祝辞
　　& lt; img src=https://www.yisu.com/zixun/薄?资产/logo.png”>
　　
　　
　　 　　 　　<>脚本 　　从’。/组件/导入HelloWorld HelloWorld.vue” 　　出口默认{ 　　名称:“应用程序”, 　　组件:{ 　　HelloWorld 　　} 　　} 　　

像这样就注册了一个HelloWorld的局部组件。

<强>二、全局组件注册的源码

1. vue初始化的时候,会调用initGlobalAPI ()

//敬肟?】//代码所在文件:src//global-api/index.js核心 　　导出功能initGlobalAPI (Vue: GlobalAPI) {//÷云渌薰卮? 　　initAssetRegisters (Vue)//这个方法就是用于组件注册的方法 　　}

2。在initAssetRegisters()方法中执行组件的定义

//敬肟?】//代码所在文件:src//global-api/assets.js核心 　　导出功能initAssetRegister (Vue) { 　　ASSET_TYPES.forEach (type=祝辞{//ASSET_TYPES包括组件,指令,过滤器 　　Vue函数[型]=(id、定义){//恍┨跫卸? 　　如果(type===& # 39;组件# 39;,,isPlainObject(定义)){ 　　definition.name=definition.name | | id 　　定义=this.options._base.extend(定义)//将定义转换为一个继承于Vue的构造函数 　　}//渌嘈偷拇? 　　 　　this.options[类型+ & # 39;& # 39;][id]=//定义将这个构造函数挂载到Vue.options.components上 　　返回定义 　　} 　　}) 　　}

此时,我们可以单步调试一下我们上面的例子,来看一下定义一开始是什么,以及执行挂载后Vue.options变成了什么样子:

a.definition:其实传入的时候就是我们一开始定义的全局组件的具体内容

注册vue组件的方法有哪些

b.Vue。选择:可以看到我们定义的全局组件你好已经存在在Vue.options.components上了

注册vue组件的方法有哪些

3。实例化组件的时候,代码会执行到Vue.prototype._init()上面

//敬肟?】//代码所在文件:src/核心//init.js实例 　　Vue.prototype。_init=function(选项){//. .省略其他无关代码 　　如果选择,,options._isComponent){//组件 　　initInternalComponent (vm选项) 　　其他}{//非组件 　　vm。选择=mergeOptions(美元 　　resolveConstructorOptions (vm.constructor), 　　选项| | {}, 　　虚拟机 　　) 　　} 　　}

这里将自己定义的组件的选择与Vue.options做了一个合并,并且赋值给了vm。选择美元,而通过【代码块2】我们可以知道全局组件的构造函数已经被放在了Vue.options.components上,所以经过这一步,vm。美元options.components上面也有了全局组件的构造函数,所以现在在任意组件都能拿到全局组件,因为任何组件初始化的时候都会执行这个合并。

我们可以通过单步调试上面的例子看一下现在的vm选项上美元。面有些什么

注册vue组件的方法有哪些

4。在创建vnode的过程中,会执行_createElement方法

//敬肟?】//代码所在文件:src//vdom/create-element.js核心 　　导出功能_createElement(上下文、标签、数据、儿童、正常化){ 　　如果(typeof标签===& # 39;字符串# 39;){//? 　　如果(config.isReservedTag(标签)){//Ａ舻膆tml标签 　　}else if (isDef(男星=resolveAsset(上下文。选择美元,& # 39;组件# 39;标记))){//已经注册过的全局组件 　　vnode=createComponent(男星、数据上下文、儿童、标签) 　　其他}{//不是内置标签也不是已经注册过的组件,就创建一个全新的vnode 　　vnode=new vnode ( 　　标签数据,孩子, 　　未定义,定义上下文 　　) 　　} 　　} 　　}

注册vue组件的方法有哪些