解析vue组件注册的两种方式
发布时间：2022-01-06 22:47:27 所属栏目：语言 来源：互联网
导读：今天我们来了解vue组件注册的内容，下文会给大家介绍vue组件注册的两种方式， 全局组件的注册方法和局部组件的注册方法，下文示例有一定的参考价值，需要的朋友可以了解看看。 一、了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from
|
今天我们来了解vue组件注册的内容，下文会给大家介绍vue组件注册的两种方式， 全局组件的注册方法和局部组件的注册方法，下文示例有一定的参考价值，需要的朋友可以了解看看。 一、了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#app', router, components: { App }, template: '' }) 上面我们就通过Vue.component()注册了一个全局组件hello，接下来分析源码实现的时候也是基于这个例子来进行的。 1.2 局部组件的注册 <template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components:{ HelloWorld } } </script> 像这样就注册了一个HelloWorld的局部组件。 二、全局组件注册的源码 1.Vue初始化的时候，会调用initGlobalAPI() //【代码块1】 //代码所在文件：src/core/global-api/index.js export function initGlobalAPI(Vue: GlobalAPI){ //...省略其他无关代码 initAssetRegisters(Vue) //这个方法就是用于组件注册的方法 } 2.在initAssetRegisters()方法中执行组件的定义 //【代码块2】 //代码所在文件：src/core/global-api/assets.js export function initAssetRegister(Vue){ ASSET_TYPES.forEach(type=>{ //ASSET_TYPES包括component、directive、filter Vue[type] = function(id, definition){ //...一些条件判断 if(type === 'component' && isPlainObject(definition)){ definition.name = definition.name || id definition = this.options._base.extend(definition) //将definition转换为一个继承于Vue的构造函数 } //...其他类型的处理 this.options[type+'s'][id] = definition //将这个构造函数挂载到Vue.options.components上 return definition } }) } 此时，我们可以单步调试一下我们上面的例子，来看一下definition一开始是什么，以及执行挂载后Vue.options变成了什么样子： a.definition: 其实传入的时候就是我们一开始定义的全局组件的具体内容 b.Vue.options: 可以看到我们定义的全局组件hello已经存在在Vue.options.components上了 （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
