March 9, 2020

vue mixins 教學:組件方法複用

獨立抽出常用方法


文 / 西打藍 Siddharam

組件共用方法


在 vue 的組件中,有一些常用的方法,我們可以獨立抽出放在 mixins,就不需要在每個組件又寫一次 methods。mixins 中的對象不只有 methods,還可以包含生命週期、data、computed,相當靈活。

mixins


之前使用 mixins 的經驗,是在全域中使用,如下範例:



// utils/mixins.js

import Vue from 'vue'

// 全站共用的 function,會注入每個 component 當中
Vue.mixin({
  methods: {
    // 標註千分位
    formatComma (str) {
      return str ? str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : str
    }
  }
})



在 main.js 中引入:



// main.js

...
...

import '@/utils/mixins'

...
...



使用時,可以直接呼叫:



// components/CountNumber.vue

...
...

this.formatComma(2999999)

...
...



如果你只是少部分組件會共用的 methods,那麼你可以考慮局部引用,它的用法如下範例:



// utils/mixins.js

export default {
   data () {
      msg: 'mixins data'
   },
   created () {
      console.log('mixins created')
   },
   methods: {
      mixinsMethod: function () {
         console.log('mixins function')
      }
   }
}



組件需要使用時再引入:



...
...

import mixins from '.utils/mixins.js'

export default {
   mixins: [mixins],
   created: function () {
      console.log(this.$data.msg)
      this.mixinsMethod()
   }
}

    // 將接續印出:
    // mixins created
    // mixins data
    // mixins function

...
...



兩種方式都很方便,端看你的使用需求,另外還有一種直接在 vue prototype 建立方法的方式,但它的靈活動就沒那麼大了。




閱讀量




聯絡與合作


有文字採訪、網站開發,或是諮詢需求,皆可以來信詢問。在關於下方有作品參考。

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: aaa24295234@gmail.com

訂閱: