Vue如何实现组件的源码解析
官网上关于组件继承分为两大类,全局组件和局部组件。无论哪种方式,最核心的是创建组件,然后根据场景不同注册组件。
有一点要牢记,“Vue.js 组件其实都是被扩展的 Vue 实例”!
1. 全局组件
// 方式一 var MyComponent = Vue.extend({ name: 'my-component', template: '<div>A custom component!</div>' }); Vue.component('my-component', MyComponent); // 方式二 Vue.component('my-component', { name: 'my-component', template: '<div>A custom component!</div>' }); // 使用组件 <div id="example"> <my-component></my-component> </div>
主要涉及到两个静态方法:
Vue.extend
:通过扩展Vue实例的方法创建组件Vue.component
:注册组件
先来看看Vue.extend
源码,解释参考中文注释:
Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var Super = this; var isFirstExtend = Super.cid === 0; if (isFirstExtend && extendOptions._Ctor) { return extendOptions._Ctor; } var name = extendOptions.name || Super.options.name; // 如果有name属性,即组件名称,检测name拼写是否合法 if ('development' !== 'production') { if (!/^[a-zA-Z][\w-]*$/.test(name)) { warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.'); name = null; } } // 创建一个VueComponent 构造函数,函数名为‘VueComponent'或者name var Sub = createClass(name || 'VueComponent'); // 构造函数原型继承Vue.prototype Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.cid = cid++; // 合并Vue.options和extendOptions,作为新构造函数的静态属性options Sub.options = mergeOptions(Super.options, extendOptions); //'super'静态属性指向Vue函数 Sub['super'] = Super; // start-----------------拷贝Vue静态方法 // allow further extension Sub.extend = Super.extend; // create asset registers, so extended classes // can have their private assets too. config._assetTypes.forEach(function (type) { Sub[type] = Super[type]; }); // end-----------------拷贝Vue静态方法 // enable recursive self-lookup if (name) { Sub.options.components[name] = Sub; } // cache constructor:缓存该构造函数 if (isFirstExtend) { extendOptions._Ctor = Sub; } return Sub; };
可以看到,Vue.extend
的关键点在于:创建一个构造函数function VueComponent(options) { this._init(options) },
通过原型链继承Vue原型上的属性和方法,再讲Vue的静态函数赋值给该构造函数。
再看看Vue.component
源码,解释参考中文注释:
// _assetTypes: ['component', 'directive', 'elementDirective', 'filter', 'transition', 'partial'] config._assetTypes.forEach(function (type) { // 静态方法Vue.component Vue[type] = function (id, definition) { if (!definition) { return this.options[type + 's'][id]; } else { /* istanbul ignore if */ if ('development' !== 'production') { if (type === 'component' && (commonTagRE.test(id) || reservedTagRE.test(id))) { warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id); } } // 如果第二个参数是简单对象,则需要通过Vue.extend创建组件构造函数 if (type === 'component' && isPlainObject(definition)) { if (!definition.name) { definition.name = id; } definition = Vue.extend(definition); } // 将组件函数加入Vue静态属性options.components中,也就是,全局注入该组件 this.options[type + 's'][id] = definition; return definition; } }; });
方法Vue.component
的关键点是,将组件函数注入到Vue静态属性中,这样可以根据组件名称找到对应的构造函数,从而创建组件实例。
2. 局部组件
var MyComponent = Vue.extend({ template: '<div>A custom component!</div>' }); new Vue({ el: '#example', components: { 'my-component': MyComponent, 'other-component': { template: '<div>A custom component!</div>' } } });
注册局部组件的特点就是在创建Vue实例的时候,定义components
属性,该属性是一个简单对象,key值为组件名称,value可以是具体的组件函数,或者创建组件必须的options对象。
来看看Vue如何解析components
属性,解释参考中文注释:
Vue.prototype._init = function (options) { options = options || {}; .... // merge options. options = this.$options = mergeOptions(this.constructor.options, options, this); ... }; function mergeOptions(parent, child, vm) { //解析components属性 guardComponents(child); guardProps(child); ... } function guardComponents(options) { if (options.components) { // 将对象转为数组 var components = options.components = guardArrayAssets(options.components); //ids数组包含组件名 var ids = Object.keys(components); var def; if ('development' !== 'production') { var map = options._componentNameMap = {}; } // 遍历组件数组 for (var i = 0, l = ids.length; i < l; i++) { var key = ids[i]; if (commonTagRE.test(key) || reservedTagRE.test(key)) { 'development' !== 'production' && warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + key); continue; } // record a all lowercase <-> kebab-case mapping for // possible custom element case error warning if ('development' !== 'production') { map[key.replace(/-/g, '').toLowerCase()] = hyphenate(key); } def = components[key]; // 如果是组件定义是简单对象-对象字面量,那么需要根据该对象创建组件函数 if (isPlainObject(def)) { components[key] = Vue.extend(def); } } } }
在创建Vue实例过程中,经过guardComponents()函数处理之后,能够保证该Vue实例中的components属性,都是由{组件名:组件函数}
构成的,这样在后续使用时,可以直接利用实例内部的组件构建函数创建组件实例。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01