[Vue.js] Component 的運用

當我們想要重複利用某一些 UI 的時候，就可以利用 vue 的 component 來幫我們好好處理，設計得好的話再開發上便能更有彈性及節省時間。

基礎的話就是像這樣使用 componet，在裡面放一個 template，設定好 component 的名字後我們就可以在頁面上使用了。

像這樣重複使用，每個 component 都是獨立的。

很多時候我們的 componet 會需要設定不一樣的內容，這時我們就可以利用 props，在 component 建立時依據我們設定的方式把內容帶進去。

利用 v-for 的迴圈把資料帶入 component 內。

如果要從元件傳到服父層，則可以利用 $emit 的方式自訂事件，這裡的範例是自定一個 $emit('enlarge-text') 的事件，在父層就可以監聽自訂的 enlarge-text 事件。

接下來我用 v-on:set-target="setTarget" 去偵測 component 裡點的元素 id，然後更新外面那層的資料：

在 component 裡回傳

methods: {
    updateStatus: function(val){
      this.$emit('set-target', val)
    }
  }

在外層接收

setTarget: function(val){
         this.target=val;
    }

完整程式碼：