[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

留言

熱門文章