今天給大家分享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方法接受兩個參數，第一個參數是組件實例，即this。第二個參數是組件構造函數中傳入的option，這個option根據上文的分析，他是在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上面已經提到過了；_parentVode其實就是該組件實例的vnode對象（createComponentInstanceForVnode就是根據這個vnode對象去創建一個組件實例）；parent則是該組件的父組件實例對象。然后我們來看看具體initInternalComponent做了什么操作:

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

首先，用Object.create這個函數，把組件構造函數的options掛載到vm.$options的__proto__上。

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

接下把傳入參數的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就是根據:msg='msg'生成的，他的值就是在根組件里定義的那個msg{msg: 'props-message'}。而_parentListeners就是根據@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上，方便子組件調用。

總結

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