Vue源码分析–Vue.component

我将非 Vue.component 的部分去掉了

export function initAssetRegisters (Vue: GlobalAPI) {Vue.component = function (id: string,definition: Function | Object): Function | Object | void {if (!definition) {// 如果 definition 不存在，取 Vue.options.components[id]return this.options.components[id]} else {// 检查组件名是否合理validateComponentName(id)if (isPlainObject(definition)) {definition.name = definition.name || id// this.options._base.extend 等于 Vue.extend 方法// 所以Vue.component也能防止重复绑定definition = this.options._base.extend(definition)}// 将绑定的组件写到Vue.options.components上this.options.components[id] = definitionreturn definition}}
}

简单理解就是：

let MyComponent = Vue.component('name', definition)
==>
let MyComponent = Vue.extend(definition)
Vue.options.components['name'] = MyComponent

若只传一个参数

Vue.component('name')
==>
// 取Vue上的全局组件'name'
Vue.options.components['name']

Vue.extend(definition)与Vue.component('name', definition)的区别
Vue.extend(definition)返回一个组件
Vue.component('name', definition)则将这个组件绑定在Vue上，即Vue.options.components['name']上，这样在new Vue()时可以直接使用这个组件

Vue源码分析--Vue.component相关推荐

vue源码分析系列二：$mount()和new Watcher()的执行过程
续vue源码分析系列一:new Vue的初始化过程在initMixin()里面调用了$mount() if (vm.$options.el) {vm.$mount(vm.$options.el);/ ...
[Vue源码分析] 模板的编译
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: Vue有两个版本:Runtime + Compiler . Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编 ...
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
[Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎 ...
Vue源码分析——第三章
Vue源码分析--第一章 Vue源码分析--第二章 // only used in dev mode//检测 val必需是数字function checkDuration(val, name, vno ...
[Vue源码分析] Virtual DOM
最近小组有个关于vue virtual dom的分享会,提前准备一下- 读前须知: 本文章涉及源码版本为Vue 2.5.2,文中涉及到源码部分,解释直接写在源码中(中文部分为本人添加),截图尽量放完整 ...
vue源码分析系列三：render的执行过程和Virtual DOM的产生
render 手写 render 函数,仔细观察下面这段代码,试想一下这里的 createElement 参数是什么 . new Vue({el: '#application',render(crea ...
vue源码分析系列一：new Vue的初始化过程
import Vue from 'vue'(作者用的vue-cli一键生成) node环境下import Vue from 'vue'的作用是什么意思? 在 NPM 包的 dist/ 目录你将会找到很 ...
大前端-Vue源码分析
Vue源码解析-响应式原理以下内容来自拉勾教育大前端训练营笔者在学习过程中对笔记进行的一个整理心得体会嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...

Vue源码分析--Vue.component

Vue源码分析–Vue.component

Vue源码分析--Vue.component相关推荐

最新文章

热门文章