当前位置: 首页 > Web前端 > vue.js

Vue初始化中的选项合并-initInternalComponent

时间:2023-04-01 00:02:32 vue.js

exportfunctioninitInternalComponent(vm:Component,options:InternalComponentOptions){constopts=vm.$options=Object.create(vm.constructor.options)//这样做是因为它比dynamic快枚举。constparentVnode=options._parentVnodeopts.parent=options.parentopts._parentVnode=parentVnodeconstvnodeComponentOptions=parentVnode.componentOptionsopts.propsData=vnodeComponentOptions.propsDataopts._parentListeners=vnodeComponentOptions.listenersopts._renderChildren=vnodeComponentOptions.childrenopts._componentTag=vnodeComponentOptions.tagif(options.render){opts.render=options.renderopts.staticRenderFns=options.staticRenderFns}}initInternalComponent方法接受两个参数,第一个参数是组件实例,即this。第二个参数是在组件构造函数中传递的选项。根据上面的分析,在createComponentInstanceForVnode方法中定义了这个选项::InternalComponentOptions={_isComponent:true,_parentVnode:vnode,parent}//检查内联模板渲染函数constinlineTemplate=vnode.data.inlineTemplateif(isDef(inlineTemplate)){options.render=inlineTemplate.renderoptions.staticRenderFns=inlineTemplate.staticRenderFns}returnnewvnode.componentOptions.Ctor(options)}option中有三个属性值,_isComponent上面已经说了;_parentVode其实就是组件实例的vnode对象(createComponentInstanceForVnode根据这个vnode对象创建组件实例);parent是组件的父组件实例对象。然后我们使用这样的例子:

查看具体的initInternalComponent做了什么。constopts=vm.$options=Object.create(vm.constructor.options)首先使用Object.create函数将组件构造函数的options挂载到vm.$options的__proto__中。constparentVnode=options._parentVnodeopts.parent=options.parentopts._parentVnode=parentVnode接下来,挂载传递给组件实例$options的选项的_parentVode和parent。使用上面的例子,parent是我们组件的根实例,_parentVnode是生成的Vnode对象。constvnodeComponentOptions=parentVnode.componentOptions.propsData=vnodeComponentOptions.propsDataopts._parentListeners=vnodeComponentOptions.listenersopts._renderChildren=vnodeComponentOptions.childrenopts._componentTag=vnodeComponentOptions.tag然后将父组件中$options的四个属性挂载到vnode,或使用该示例,propsData是根据:msg="msg"生成的,其值为根组件中定义的msg{msg:"props-message"}。而_parentListeners是根据@log-msg="logMsg"生成的,其值为logMsg,父组件中定义的方法。if(options.render){opts.render=options.renderopts.staticRenderFns=options.staticRenderFns}最后,如果传入的option中有render,挂载$options相关的render。所以这个initInternalComponent主要做了两件事:指定组件的$options原型,将组件依赖父组件的props和listeners挂载到options中,方便子组件调用。