0%

[Vue] Vue 元件 - 基礎篇

發表於 更新於 分類於 Disqus：

Vue 元件是運用 Vue 很核心的部分，此系列將會拆成 4~5 篇文 po 上來。
本篇會從元件的基礎開始，順便帶一些有 props 觀念的例子（但 props 的細節會寫在下一篇），最後會附上一個 Demo 供大家參考。

元件的概念

網頁上不同的區塊可以由不同的元件組成，如果有重複出現的區塊，更可以利用元件來做。

各個元件的資料都是獨立的，如果需要流通各自的資料，有兩種型態：props 特性可以即時地將外層資料傳進內層，而內層資料傳到外層則要使用 emit 事件（需要透過觸發事件，才能傳遞資料）。

SPA 也是透過元件製作的（由前端模擬的路由）。

使用 x-template 建立元件

  1. 在 Vue 實例上方宣告一個元件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Vue.component('自定義元件名稱',{
      template: '# template 的 id 名稱',
      props: ['取得 data 資料的屬性名']
      // 取得 data 資料的屬性名: 自訂一個屬性名，並綁定 v-for 的 item 參數
      // 若用 v-bind 綁定 props，就能將 data 資料傳進元件
    })

    // 範例
    Vue.component('row-component',{
      template: '#rowComponentTemplate',
      props: ['person']
    })

  2. 另外宣告一個 <script>，且 type 屬性為 text/x-template 並賦予 id

    1
    2
    3
    4
    5
    6
    7
    <script type="text/x-template" id="rowComponentTemplate">
      <tr>
        <td>{{ person.name }}</td>
        <td>{{ person.cash }}</td>
        <td>{{ person.icash }}</td>
      </tr>
    </script>

  3. 在要插入元件的地方，使用 Vue 的 is 屬性來掛載元件，is 用來動態切換模板

    1
    2
    3
    <tbody>
      <tr is="row-component" v-for="(item, key) in data" :person="item" :key="key"></tr>
    </tbody>

    :person="item" 的 person 指的是元件 props 中的屬性名稱，item 則是 v-for="(item, key) in data" 的 item，且它連接的是根實例的資料。

另外一種寫法：局部註冊

1
2
3
4
5
6
7
8
9
10
// 原本的寫法是註冊在所有 Vue 的應用程式下
Vue.component('row-component',{
  template: '#rowComponentTemplate',
  props: ['person']
})
// 改寫為只有目前這個應用程式可以用
var child = {
  template: '#rowComponentTemplate',
  props: ['person']
}

在目前這個 Vue 實例下新增一個 components 特性（跟 data 物件同層），將元件註冊在這個特性裡：

1
2
3
components: {
  "row-component": child
}

元件內的 data

因為每個元件的 data 都是獨立的，所以都會有各自的資料狀態，當有需要使用，都需要獨立管理。但是要注意，在元件內使用 data 特性的時候，必須使用 function 來return 一個物件資料到 data 特性裡。

運用元件製作關注空污城市的網頁

當元件系列文結束後，就可以做出這個網頁了。