Vue源码解读之Component组件注册的实现
什么是组件?组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 Vue可以有全局注册和局部注册两种方式来注册组件。 全局注册注册方式全局注册有以下两种注册方式: 通过Vue.component 直接注册。 通过Vue.extend来注册。 具体过程Vue初始化时,initGlobalAPI通过调用initAssetRegisters()进行组件注册。 图一: initAssetRegisters里面通过this.options._base.extend方法将定义对象转化为构造器,而options._base.extend其实就是Vue.extend。接下来我们就看一下Vue.extend做了什么。 //如果有name属性,检验name拼写是否合法
var name = extendOptions.name || Super.options.name; if ("development" !== 'production' && name) { validateComponentName(name); } var Sub = function VueComponent (options) { // 处理props和computed响应式配置项 // allow further extension/mixin/plugin usage //在新的构造器上挂上vue的工具方法 // keep a reference to the super options at extension time. //缓存组件构造器在extendOptions上 vue.extend返回了一个带有附加Option的vue构造器。这个构造器被命名为Sub,等待render时候初始化。 initAssetRegisters完成之后,options下挂载了全局组件button-counter,如图: 接下来调用new Vue()渲染vue整体的生命周期 局部注册如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册。 注册方式具体过程Vue局部组件注册也是通过initAssetRegisters()方法调用Vue.extend,不同的是在createComponent()时,initMixin()里面有判断 var vnodeComponentOptions = parentVnode.componentOptions;
opts.propsData = vnodeComponentOptions.propsData; opts._parentListeners = vnodeComponentOptions.listeners; opts._renderChildren = vnodeComponentOptions.children; opts._componentTag = vnodeComponentOptions.tag; if (options.render) { opts的结构如图所示: 局部注册和全局注册不同的是,只有该类型的组件才可以访问局部注册的子组件,而全局注册是扩展到 Vue.options 下。在所有组件创建的过程中,都会从全局的 Vue.options.components 扩展到当前组件的 vm.$options.components 下,这就是全局注册的组件能被任意使用的原因。 组件名定义定义组件名的方式有两种: 使用短横线形式引用这个自定义元素时,必须用 使用驼峰的形式 此时在引用这个自定义元素时,两种命名方法都可以使用。也就是说, 注意,直接在 DOM (即非字符串的模板) 中使用时只有短横线是有效的。如下: 可参考: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |