子元件向父元件傳值，為了增加回調函式的複用性，事件繫結採用函數語言程式設計，但是總是不能正確呼叫例項方法返回的函式：12345678910111213<slideDown :choosestyle="chooseStyle":useroptions="useroptions1"@changeSubData="receiveData(prodMoneyOff)"></slideDown>data () { message: { prodMoneyOff: ""}}, methods: {receiveData (item) { let _self = thisconsole.log(`選擇的item是${item}`) return function (val) { console.log(`傳遞的值是 ${val}`)_self.message[item] = val}}} ------------- 如果我回答對你有幫助，請關注我一下。或有其他問題也可以關注我，給我發私信

說說自己的親身經經歷吧。公司當時新起了一個專案用於前端開發人少，就讓後端開發的同事用vue畫頁面，完成前端功能的開發，給了一週的學習時間，大概知道怎麼回事就上手寫了，不知道就百度，複雜的ui設計就讓專業的前端給我們開發思路，那段時間整個工作量可能都在前端，出了好多問題，因為才開始上手寫，也不懂得什麼封裝，什麼元件化，只想著趕緊把功能完成。到了今年公司前端有了人力，我們後端開發的就不用寫前端了，程式碼經過好幾個迭代的重構，現在的程式碼寫的很工整，能漂亮，有的自己已經看不懂了，所以還是得讓專業人幹專業事。

本文參考自油管上某個國外大神的公開演講影片，學習了一下覺得很不錯，所以在專案中也使用了這些不錯的技巧。

下面就分享幾個簡單的技巧讓你寫出的vue.js程式碼更優雅

如果引數比較多，比如上圖

關鍵字篩選，區域篩選，裝置ID篩選，分頁數，每頁幾條資料，

可能會是這樣：

不過這麼寫，明顯有問題，主要是watch了很多引數，而且函式的處理都差不多，可以修改一下，透過methods處理。

當然這麼寫，需要在模板裡面每個引數change的地方繫結事件，並傳遞引數值,比如分頁change時：

相比上面的各種watch，程式碼明顯少了很多，但是還有一個問題，那就是要在template的很多地方繫結change事件。

最後，當然是使用我們重點推薦的computed + watch了。

2. 使用mixin提取公共部分

很多列表頁其實使用的很多屬性都是一樣的，比如：分頁 page數量 size搜尋關鍵 字keyword表格資料 tableData

這些公共的部分其實可以透過mixin來提取出來。

在要用到的頁面。

3. 自動註冊全域性元件

正常情況下，我們需要使用一個我們自己封裝的元件時，需要先引入，再註冊，最後才能在template模板中使用。

當有多個頁面需要用到這些元件時，那麼就需要在每個需要的頁面重複這些步驟。

為了簡化這些步驟，可以考慮把這些元件作為全域性元件來使用，這樣每個頁面需要時，就可以直接使用了。

不過還有一個問題，那就是需要我們手動的全域性註冊。

當元件多了以後，手動註冊也變得繁瑣起來，可以透過require.context()實現自動註冊元件。

4. 自動註冊vuex模組

之前我們是這麼註冊vuex模組的：

可以發現每個模組都要我們手動匯入，然後加入到module裡面，如此重複。

當模組不多還好，假如專案大了，有50個模組，那就得要做很多重複的工作。 跟註冊元件一樣，我們還是利用require.context來實現。

首先編碼方面，template部分使用pug語法，可以簡化大部分標籤的書寫。css部分可以選用less之類的包，在寫樣式時用大括號巢狀，每個塊的樣式分離開。每個元件的樣式應該寫在元件內部，並加上scoped標記避免汙染其他元件，應該儘量避免定義使用全域性樣式。script部分建議用上vue-class-component，用裝飾器的語法，程式碼結構一目瞭然，也可以用ts。當然vue程式碼要好看，合理設計結構很重要，將可複用的部分抽象成元件，將邏輯程式碼和功能程式碼分離。定時重構專案，將可複用的部分單獨分離開來，做成npm包釋出，或者使用bit來管理公共元件，實現多專案複用。

合理利用格式化工具，在專案根目錄定義prettier的配置檔案，本地或者全域性安裝prettier的包，在提交git或者釋出程式碼前，做一次全域性格式化，緊接著可以再做一下eslint的autofix，然後再打包釋出。當然如果使用了vscode的話，設定下儲存時自動格式化也是可以的。

我認為要寫出漂亮的程式碼，不光光是使用 Vue 這一語言的問題。任何程式語言，甚至哪怕我們手寫文字都是一樣的。

字如其人，相信程式碼也能反映出這人的功底水平。

我想說，有這方面困擾的同學在這兩方面努力：

腳手架

向主流的前端框架，都有自帶的腳手架工具，像 vue 就有 vue-cli，我們完全可以用它來幫助我們第一時間生成“規範”的專案結構。

你看下如下專案目錄的結構，是不是很快能定位所要的檔案？

對於初學者來說，這樣可以說是最佳實踐了。當你經驗越來越豐富，團隊有更高的需要時，可以再完善修改。

程式語言設計思想

程式語言中，有一個概念叫做模板程式碼，通俗的講：就是一大堆類似，或者 Ctrl C，Ctrl V 的重複程式碼。

你想象下，專案裡一堆元件在載入後都做著同樣的事情（比如，載入使用者資訊），專案小沒事，凡是一個大專案，可能一個需求的變更，會涉及到多個檔案的更改，在沒有高覆蓋的測試體系下，這是相當恐怖的。

所以，就 Vue 而言，你可能就要思考：是否可以多用用 extends、或者 mixins 之類的屬性 api 了。

最後

程式碼不光光自己看的舒服，更要讓協作者，或者團隊成員都賞心悅目。

有些東西不是一時間就能登峰造極的，需要平時逐步積累。希望大家的 coding 水平很越來越強。