Vue2.0 源碼分析筆記（五）抽象組件

在初始化的時候，initlifecycle中有這樣一段代碼

// 定義 parent，它引用當前實例的父組件
let parent = options.parent
// 如果當前實例有父組件，且當前實例不是抽象的
if (parent && !options.abstract) {
  // 使用 while 循環(huán)查找第一個非抽象的父組件
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent
  }
  // 經過上面的 while 循環(huán)后，parent 應該是一個非抽象的組件，將它作為當前實例的父級，所以將當前實例 vm 添加到父級的 $children 屬性里
  parent.$children.push(vm)
}

其中options.abstract,，通過設置這個選項為 true，可以指定該組件是抽象的，那么通過該組件創(chuàng)建的實例也都是抽象的，比如

AbsComponents = {
  abstract: true,
  created () {
    console.log('我是一個抽象的組件')
  }
}

抽象組件的特點：

1.不渲染真實DOM，比如 Vue 內置的一些全局組件比如 keep-alive 或者 transition，我們知道這兩個組件它是不會渲染DOM至頁面的，但他們依然給我提供了很有用的功能。
2.它們不會出現(xiàn)在父子關系的路徑上

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容