什麼是元件

什麼是元件?元件跟畫面上的元素有什麼差別?

我們先來看看普通的元素是什麼好了。
首先,這是一個計數器的應用程式,每點擊一次按鈕,counter 的次數就會 +1。

<div id="app">
  <div>
    你已經點擊了
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
    下。
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      counter: 0,
    },
  });
</script>

這時候我們如果要再新增一個計數器,可以在 HTML 直接多新增一個 button。
但這會有個問題,就是點計數器 1 號的時候,計數器 2 號也會跟著 +1。

<div id="app">
  <div>
    <!-- 計數器 1 號 -->
    你已經點擊了
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
    下。
    <!-- 計數器 2 號 -->
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
  </div>
</div>

原因是兩個計數器的 counter 是共用的,應該要分開計算才對,所以我們再新增一個 counter 的變數。
然而,如果我們要做 5 個或 10 個計數器,不就要新增 10 個變數了?這樣子程式碼會變很亂!

這時候就會用到 Vue 的元件化的概念哩 :P

元件化

這邊就來介紹如何將元素轉為元件吧!

STEP 1:建立 Vue 元件

首先,Vue.components 必須寫在 new Vue 前面,因為 JavaScript 是依序執行的,需要先定義元件,後面的程式碼才能讀取到。
而且建立元件後,我們要改用 function 來 return 資料,回傳的資料要是物件格式。

// 建立元件
Vue.component('counter-component', {
  // 建立的元件可自定義名稱
  data: function() {
    // 不同的地方:data 改使用 function
    return {
      counter: 0,
    };
  },
  template: `
  <div>
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button>
  </div>
  `,
});

var app = new Vue({
  el: '#app',
  data: {
    counter: 0,
  },
});

STEP 2:呈現元件

剛才新增的 Vue 元件名稱是 counter-component,這個 counter-component 也會是呈現在畫面上的標籤名稱,要寫在 HTML 中的。

<div id="app">
  <div>
    <!-- 計數器 1 號 -->
    你已經點擊了
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
    下。
    <!-- 計數器 2 號 -->
    <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">
      {{ counter }}
    </button>
    <!-- 新增 Vue 元件 -->
    <counter-component></counter-component>
    <counter-component></counter-component>
    <counter-component></counter-component>
  </div>
</div>

畫面上成功出現元件後,可以試著點擊看看原本的 button 與 Vue 元件。

可以發現原本的兩個計數器還是一樣會與資料連動變化,但是這三個元件與它們的資料都是獨立的,也可以打開 DevTools 看看其中的差異!

總結

透過這個例子我們可以知道 Vue 元件的概念與使用方式,事實上現在 Vue 已經幾乎全面是以 SFC 的方式在撰寫了,也就是每個檔案都是元件,最後在到頁面上組合起來!

元件可以減少我們撰寫上的重複性,也可以讓程式碼的可用性更高,是個相當實用的技巧喔 :P

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫