溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是詳解Vue初始化中的initInternalComponent，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
今天給大家分享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._parentVnode opts.parent = options.parent opts._parentVnode = parentVnode
接下把傳入參數的option的_parentVode和parent掛載到組件實例$options上。用我們在兩種策略里的那個例子來說，parent就是我們組件的根實例，而_parentVnode就是<comp :msg="msg" @log-msg="logMsg"></comp>生成的一個Vnode對象。
const vnodeComponentOptions = parentVnode.componentOptions opts.propsData = vnodeComponentOptions.propsData opts._parentListeners = vnodeComponentOptions.listeners opts._renderChildren = vnodeComponentOptions.children opts._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的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
