[Vue.js] Component 的運用

標籤: Vue.js javascript

當我們想要重複利用某一些 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;
    }

 

完整程式碼: