[Vue.js] Component 運用

張貼者： 日期：
可以把 ui 元件組成一個 component，替 component 命名後再設計 template 來使用。

See the Pen vue component by deathhell (@deathhell) on CodePen.




component 可以重複利用

See the Pen component 2 by deathhell (@deathhell) on CodePen.




可以設定 props，這樣就可以把變數傳到 ui 裡。

See the Pen component 3 by deathhell (@deathhell) on CodePen.




如果我們要把資料給傳到 component 內，可以用 v-bind:item，後面的 item 是我們自訂的，會對應到 component 裡的 props，接著就可以利用 v-for 的迴圈把資料都顯示出來。

See the Pen component 3 by deathhell (@deathhell) on CodePen.




使用 $emit 的方式傳入事件名稱，並用 v-on 監聽事件。

See the Pen rovawj by deathhell (@deathhell) on CodePen.



也可以把改變的值用 $event 的方式帶入

或是用 method 處理



methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}


參考: https://cn.vuejs.org/v2/guide/components.html

留言

張貼留言