/

Vue.js元件

Vue.js元件

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

如何使用元件

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

讓我們用程式碼來談談。

第一種方式是：

1
2
3
new Vue({
  // 選項
})

第二種方式是：

1
2
3
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> 標籤，您將使用：

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

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

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

1
2
3
<div id="app">
  <user-name name="Flavio"></user-name>
</div>
1
2
3
4
5
6
7
8
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)**，它類似於駝峰式，但首字母大寫：

1
2
3
Vue.component('UserName', {
  // ...
})

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

區域元件

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

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

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

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

1
2
3
4
5
6
new Vue({
  el: '#app',
  components: {
    Sidebar
  }
})

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

1
2
3
4
5
6
7
8
import Sidebar from './Sidebar'

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

重用元件

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

1
2
3
4
5
<div id="app">
  <user-name name="Flavio"></user-name>
  <user-name name="Roger"></user-name>
  <user-name name="Syd"></user-name>
</div>
1
2
3
4
5
6
7
8
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

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

元件的構建塊

到目前為止，我們已經看到了元件如何接受 el、props 和 template 屬性。

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

元件還接受其他屬性：

tags: [“Vue.js”, “Components”, “Single File Components”, “Props”]