阿西八！！！寫久了Flutter，前端的知識真的是忘得差不多了，今天就來複習一下Vue中如何封裝公用變數以及公用方法

以封裝一個正則表示式為例！

第一步

建立我們的公用資料夾

我們來看一下utils.js中的程式碼

class PublicMethods{
 constructor() {
  this.name = '公用變數'
 }
 verificationPhon(phone){
 // 大陸手機號碼11位數，匹配格式：前三位固定格式+後8位任意數
 // 13+任意數 * 15+除4的任意數 * 18+除1和4的任意數 * 17+除9的任意數 * 147
 // 新增了166、198、199號段的手機號
 var reg= /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
 return reg.test(phone);
 }
}

var Plugins = new PublicMethods();
export default Plugins;

知識講解：

export 和 export default的區別是什麼？

通過export丟擲去的變數或者方法，使用的時候需要用{ }包裹住，來指明使用什麼，而export default就方便些，丟擲去後，直接用即可，可以自己試一下！

很好，我們現在已經將公用的方法以及變數丟擲去了，那如何使用他呢？

首先開啟我們Vue的命根子：main.js

import Vue from 'vue'
import App from './App'
import Plugins from '@/utils/utils.js'

Vue.config.productionTip = false
Vue.prototype.Plugins = Plugins;

App.mpType = 'app'

const app = new Vue({
 ...App
})
app.$mount()

注意程式碼中的Plugins，就是我們掛載到了Vue的例項上面了，也就是可以全域性使用這個封裝的JS，接下來我們就去需要使用的頁面使用它

點選圖中的驗證碼按鈕，就可以呼叫我們的這個方法了，記得傳入手機號

getCode(){
 console.log(this.Plugins.verificationPhon(this.phone));
}

結束了！完結！

以上這篇Vue之封裝公用變數以及實現方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。