元件是介面的單一、獨立單位。它們可以擁有自己的狀態、標記和樣式。

如何使用元件

Vue 元件可以以四種主要方式定義。

讓我們用程式碼來談談。

第一種方式是:

new Vue({
  // 選項
})

第二種方式是:

Vue.component('component-name', {
  // 選項
})

第三種方式是使用區域元件 (local components):這些元件僅在特定元件中可存取,而在其他地方則無法使用(非常適合封裝)。

第四種方式是在 .vue 檔案中,也稱為單一檔案元件 (Single File Components)。

讓我們詳細探討前三種方式。

在建構不是單頁應用程式 (Single Page Application, SPA) 的應用程式中使用 new Vue()Vue.component() 是使用 Vue 的標準方式。比如在聯絡表單或購物車等部分頁面中使用 Vue.js。或者可能 Vue 是在所有頁面中使用,但是伺服器渲染版面配置,並將 HTML 提供給客戶端,然後載入您建立的 Vue 應用程式。

在 SPA 中,由 Vue 建構 HTML 的情況下,使用單一檔案元件 (Single File Components) 是更常見的做法,因為它們更方便。

您可以通過將 Vue 控制項掛載到 DOM 元素上來實例化 Vue。如果您有一個 <div id="app"></div> 標籤,您將使用:

new Vue({ el: '#app' })

使用 Vue.component() 初始化的元件沒有對應的標籤名稱,所以它通常是主容器元件。

應用程式中使用的其他元件是使用 Vue.component() 初始化的。這樣的元件允許您定義一個標籤,可以在應用程式中多次嵌入該元件,並在 template 屬性中指定元件的輸出:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({
  el: '#app'
})

我們在做什麼?我們在 #app 上初始化一個 Vue 根元件,並在其中使用 Vue 元件 user-name,該元件抽象了我們對用戶的問候。

該元件接受一個屬性,這是我們用於向子元件傳遞數據的屬性。

Vue.component() 調用中,我們將 user-name 作為第一個參數傳遞。這給了該元件一個名字。您可以以兩種方式在這裡寫名字。第一種是我們所使用的,稱為短線連接法 (kebab-case)。第二種是稱為帕斯卡法 (PascalCase),它類似於駝峰式,但首字母大寫:

Vue.component('UserName', {
  // ...
})

Vue 內部會自動從 user-name 創建到 UserName 的別名,反之亦然,因此您可以使用您喜歡的別名。通常最好在 JavaScript 中使用 UserName,在模板中使用 user-name

區域元件

使用 Vue.component() 創建的任何元件都是全局註冊的。您不需要將它指派給變數或在模板中傳遞它以重用。

您可以通過將定義元件對象的物件分配給一個變數,將元件封裝成區域元件:

const Sidebar = {
  template: '<aside>Sidebar</aside>'
}

然後,使用 components 屬性將其在另一個元件中使用,使其可用:

new Vue({
  el: '#app',
  components: {
    Sidebar
  }
})

您可以在相同的檔案中撰寫該元件,但一種很好的方法是使用 JavaScript 模塊:

import Sidebar from './Sidebar'

export default {
  el: '#app',
  components: {
    Sidebar
  }
}

重用元件

可以多次添加子元件。每個獨立的實例彼此獨立:

<div id="app">
  <user-name name="Flavio"></user-name>
  <user-name name="Roger"></user-name>
  <user-name name="Syd"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({
  el: '#app'
})

元件的構建塊

到目前為止,我們已經看到了元件如何接受 elpropstemplate 屬性。

  • el 僅在使用 new Vue({}) 初始化的根元件中使用,並標識元件將掛載的 DOM 元素。
  • props 列出了我們可以傳遞給子元件的所有屬性
  • template 是我們可以設定元件模板的地方,該模板負責定義元件生成的輸出。

元件還接受其他屬性: