元件是介面的單一、獨立單位。它們可以擁有自己的狀態、標記和樣式。
如何使用元件
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'
})
元件的構建塊
到目前為止,我們已經看到了元件如何接受 el
、props
和 template
屬性。
el
僅在使用new Vue({})
初始化的根元件中使用,並標識元件將掛載的 DOM 元素。props
列出了我們可以傳遞給子元件的所有屬性template
是我們可以設定元件模板的地方,該模板負責定義元件生成的輸出。
元件還接受其他屬性: