今天給大家分享Vue初始化中的選項(xiàng)合并之initInternalComponent的相關(guān)知識(shí)，具體代碼如下所示：

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方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是組件實(shí)例，即this。第二個(gè)參數(shù)是組件構(gòu)造函數(shù)中傳入的option，這個(gè)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中有三個(gè)屬性值，_isComponent上面已經(jīng)提到過(guò)了；_parentVode其實(shí)就是該組件實(shí)例的vnode對(duì)象（createComponentInstanceForVnode就是根據(jù)這個(gè)vnode對(duì)象去創(chuàng)建一個(gè)組件實(shí)例）；parent則是該組件的父組件實(shí)例對(duì)象。然后我們來(lái)看看具體initInternalComponent做了什么操作:

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

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

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

接下把傳入?yún)?shù)的option的_parentVode和parent掛載到組件實(shí)例$options上。用我們?cè)趦煞N策略里的那個(gè)例子來(lái)說(shuō)，parent就是我們組件的根實(shí)例，而_parentVnode就是<comp :msg='msg' @log-msg='logMsg'></comp>生成的一個(gè)Vnode對(duì)象。

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

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

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

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

總結(jié)

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