# Vue - 元件化
這邊簡單舉例如何處理 Vue 的元件化，首先我們先有以下基本的 Vue 實例用來計數

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

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


但當我們想要有多個一模一樣的計數器我們可能會想說那我再複製一個

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

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


此時會發現點擊的時候多個計數器數字會同時變動，可想而知因為他們共用同一個counter資料,
因此我們需要製作元件來獨立每個計數器。

首先我們要使用 Vue.component()，第一個參數放元件名稱，也就是之後用來作為 HTML 標籤名，第二個參數為一個物件，裏頭包含一個 data ， data 的內容跟一般寫 Vue 實例的資料 大致上一樣，比較不同的是 data 是一個 function ，裡面回傳一個物件的形式。

而 template 屬性則可以放元件想要呈現的模板，可以包含 HTML 以及 Vue 在 HTML 上的操作。

<script>
Vue.component('counter-component',{
    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
  },
});
</script>

而在 HTML 上我們可以直接使用多個 <counter-component></counter-component> 來使用元件，此時呈現的計數就會個別的獨立計算了!

<counter-component></counter-component>
<counter-component></counter-component>
<counter-component></counter-component>


###### tags: `Vue`