今天給大家分享Vue初始化中的選項合并之initInternalComponent的相關知識，具體代碼如下所示：

export function initInternalComponent (vm: Component, options: InternalComponentOptions) { const opts = vm.$options = Object.create(vm.constructor.options) // doing this because it’s faster than dynamic enumeration. const parentVnode = options._parentVnode opts.parent = options.parent opts._parentVnode = parentVnode const vnodeComponentOptions = parentVnode.componentOptions opts.propsData = vnodeComponentOptions.propsData opts._parentListeners = vnodeComponentOptions.listeners opts._renderChildren = vnodeComponentOptions.children opts._componentTag = vnodeComponentOptions.tag if (options.render) { opts.render = options.render opts.staticRenderFns = options.staticRenderFns }}

initInternalComponent方法接受兩個參數(shù)，第一個參數(shù)是組件實例，即this。第二個參數(shù)是組件構(gòu)造函數(shù)中傳入的option，這個option根據(jù)上文的分析，他是在createComponentInstanceForVnode方法中定義的：

export function createComponentInstanceForVnode ( vnode: any, // we know it’s MountedComponentVNode but flow doesn’t parent: any, // activeInstance in lifecycle state): Component { const options: InternalComponentOptions = { _isComponent: true, _parentVnode: vnode, parent } // check inline-template render functions const inlineTemplate = vnode.data.inlineTemplate if (isDef(inlineTemplate)) { options.render = inlineTemplate.render options.staticRenderFns = inlineTemplate.staticRenderFns } return new vnode.componentOptions.Ctor(options)}

option中有三個屬性值，_isComponent上面已經(jīng)提到過了；_parentVode其實就是該組件實例的vnode對象（createComponentInstanceForVnode就是根據(jù)這個vnode對象去創(chuàng)建一個組件實例）；parent則是該組件的父組件實例對象。然后我們來看看具體initInternalComponent做了什么操作:

const opts = vm.$options = Object.create(vm.constructor.options)

首先，用Object.create這個函數(shù)，把組件構(gòu)造函數(shù)的options掛載到vm.$options的__proto__上。

const parentVnode = options._parentVnodeopts.parent = options.parentopts._parentVnode = parentVnode

接下把傳入?yún)?shù)的option的_parentVode和parent掛載到組件實例$options上。用我們在兩種策略里的那個例子來說，parent就是我們組件的根實例，而_parentVnode就是<comp :msg='msg' @log-msg='logMsg'></comp>生成的一個Vnode對象。

const vnodeComponentOptions = parentVnode.componentOptionsopts.propsData = vnodeComponentOptions.propsDataopts._parentListeners = vnodeComponentOptions.listenersopts._renderChildren = vnodeComponentOptions.childrenopts._componentTag = vnodeComponentOptions.tag

然后把父組件里的vnode上的四個屬性掛載到我們的$options上，還是用那個例子來說，propsData就是根據(jù):msg='msg'生成的，他的值就是在根組件里定義的那個msg{msg: 'props-message'}。而_parentListeners就是根據(jù)@log-msg='logMsg'生成的，他的值是logMsg這個定義在父組件中的方法。

if (options.render) { opts.render = options.render opts.staticRenderFns = options.staticRenderFns}

最后就是如果傳入的option中如果有render，把render相關的也掛載到$options上。因此，這個initInternalComponent主要做了兩件事情：1.指定組件$options原型，2.把組件依賴于父組件的props、listeners也掛載到options上，方便子組件調(diào)用。

總結(jié)

到此這篇關于Vue初始化中的選項合并之initInternalComponent詳解的文章就介紹到這了,更多相關Vue初始化選項合并內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！