Vue元件化思想

• 元件化是Vue.js中的重要思想
  • 它提供了一種抽象，讓我們可以開發出一個個獨立可複用的小元件來構造我們的應用
  • 任何的應用都會被抽象成一顆元件樹

• 元件化思想的應用：
  • 儘可能的將頁面拆分成一個個小的、可複用的元件
  • 這樣讓我們的程式碼更加方便組織和管理，並且擴充套件性也更強

註冊元件的基本步驟

• 元件的使用分成三個步驟
  • 建立元件構造器
  • 註冊元件
  • 使用元件

註冊元件步驟解析

• 1.Vue.extend()：
  • 呼叫Vue.extend()建立的是一個元件構造器。
  • 通常在建立元件構造器時，傳入template代表我們自定義元件的模板。
  • 該模板就是在使用到元件的地方，要顯示的HTML程式碼。
• 2.Vue.component()
  • 呼叫Vue.component()是將剛才的元件構造器註冊為一個元件，並且給它起一個元件的標籤名稱。
  • 所以需要傳遞兩個引數：1、註冊元件的標籤名 2、元件構造器
• 3.元件必須掛載在某個Vue例項下，否則它不會生效。

全域性元件和區域性元件

• 當我們通過呼叫Vue.component()註冊元件時，元件的註冊是全域性的
  • 這意味著該元件可以在任意Vue示例下使用
• 如果我們註冊的元件是掛載在某個例項中, 那麼就是一個區域性元件

父元件和子元件