|
官网上关于组件继承分为两大类，全局组件和局部组件。无论哪种方式，最核心的是创建组件，然后根据场景不同注册组件。
有一点要牢记，“Vue.js 组件其实都是被扩展的 Vue 实例”！
1. 全局组件
A custom component! '
});
Vue.component('my-component',MyComponent);
// 方式二
Vue.component('my-component',{
name: 'my-component',template: ' A custom component! '
});
// 使用组件
<div id="example">
主要涉及到两个静态方法：
Vue.extend：通过扩展Vue实例的方法创建组件Vue.component：注册组件
先来看看Vue.extend源码，解释参考中文注释：
可以看到，Vue.extend的关键点在于：创建一个构造函数function VueComponent(options) { this._init(options) }，通过原型链继承Vue原型上的属性和方法，再讲Vue的静态函数赋值给该构造函数。
再看看Vue.component源码，解释参考中文注释：
方法Vue.component的关键点是，将组件函数注入到Vue静态属性中，这样可以根据组件名称找到对应的构造函数，从而创建组件实例。
2. 局部组件
A custom component! '
});
new Vue({
el: '#example',components: {
'my-component': MyComponent,'other-component': {
template: ' A custom component! '
}
}
});
注册局部组件的特点就是在创建Vue实例的时候，定义components属性，该属性是一个简单对象，key值为组件名称，value可以是具体的组件函数，或者创建组件必须的options对象。
来看看Vue如何解析components属性，解释参考中文注释：
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属性，都是由{组件名:组件函数}构成的，这样在后续使用时，可以直接利用实例内部的组件构建函数创建组件实例。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
