小編這次要給大家分享的是詳解Vue初始化中的initInternalComponent，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

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

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)提到過了；_parentVode其實(shí)就是該組件實(shí)例的vnode對象（createComponentInstanceForVnode就是根據(jù)這個(gè)vnode對象去創(chuàng)建一個(gè)組件實(shí)例）；parent則是該組件的父組件實(shí)例對象。
然后我們來看看具體initInternalComponent做了什么操作:

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

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

const parentVnode = options._parentVnode
opts.parent = options.parent
opts._parentVnode = parentVnode

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

const vnodeComponentOptions = parentVnode.componentOptions
opts.propsData = vnodeComponentOptions.propsData
opts._parentListeners = vnodeComponentOptions.listeners
opts._renderChildren = vnodeComponentOptions.children
opts._componentTag = vnodeComponentOptions.tag

然后把父組件里的vnode上的四個(gè)屬性掛載到我們的$options上，還是用那個(gè)例子來說，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)用。

看完這篇關(guān)于詳解Vue初始化中的initInternalComponent的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

網(wǎng)頁標(biāo)題：詳解Vue初始化中的initInternalComponent
當(dāng)前地址：http://aaarwkj.com/article22/jjhscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、微信公眾號、網(wǎng)站排名、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)