写在前面
众所周知,Vue 的灵魂在于: 数据驱动视图 + 组件化,本篇将为大家讲解 Vue组件 的创建,还有与其息息相关的 Vue.extend 方法。
core/global-api/assets.js
在这个文件中定义了 Vue.component 方法,我修改了部分源码便于理解,但准确度不变:
Vue.component = function(id, definition) {
if (!definition) {
return this.options.components[id]
} else {
if (isPlainObject(definition)) {
definition.name = definition.name || id
definition = this.options._base.extend(definition)
}
this.options.components[id] = definition
return definition
}
}
简单解读一下就是:
如果 definition 不存在,说明此前被全局注册过,那就去 Vue.options.components 中找到对应的组件返回;
如果 definition 存在,说明这是一个新的全局组件,需要被全局注册。先判断 definition 是否是一个对象,如果是则将 definition 创建为继承自 Vue构造函数 的子类实例,如果不是则说明是一个已经继承自子类的实例,将其放置到 Vue.options.components 中,然后返回。
有一些绕,那我们就通过代码来进行说明:
// 方式1
const childComponent = Vue.extend({
data: {
},
created() {
},
methods: {
},
})
Vue.component('child', childComponent)
// 方式2
Vue.component('child', {
name: 'child-component',
data: {
},
created() {
},
methods: {
},
})