文 / 西打藍 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 建立方法的方式，但它的靈活動就沒那麼大了。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com