--- 本文開始 ---
最近在設計時，因為一個 Vue 檔的template 有太多的 form ，都擠在同一個 vue 檔中，想說之後應該很難管理。
所以就開始研究如將所有的 Form 分類成各個小組件，也方便管理。

如個每個 Form 你有再用 Vuex 的話，在 computed 裡面，又會多出 get&set 如圖

10個 form 就會有10個，所以就想要分別提出，為每個小組件

官網相關說明

首先，我們在父層的methods 還是一樣有個 createItem ，代表當有個新增按鈕，按下執行 createItem 的方法
方法中，寫入驗證

/**
 * 新增
 * @param {Object} model
 * @param {Object} vuex
 * @param {Object} routersName
 */
createItem(model, vuex, routersName) {
    this.$validator.validateAll().then((result) => {
        if (result) {
            // 驗證成功後做些什麼！！
            return;
        }
        this.createErrorMessage();
    });
},

然後我們將 Form 分別放到各個子組件中
在 script 中，加入

export default {
    $_veeValidate: {
        validator: 'new'
    },
    inject       : ['$validator'],
}

這樣就好了嗎！顆顆~~~我原來也是這樣認為，其實還要改 vee-validate 的 config ，紅圈處加入 inject: false，這樣就大功告成

const config = {
    locale: 'zh_TW',
    inject: false
};
Vue.use(VeeValidate, config);

以上處理，就可以將各 form 表組件化，由同步驗證去處理了~~~

--- 相關連結 ---
--- 更多的文章 在痞客邦 ----
痞客邦

感謝

感謝各位的觀看！
友情連結：鑽頭-瑜誠
文中如有技術不良或寫錯的部份，如您願意指出，我們也很樂意接受您的指正，但請不要惡意攻撃，我們只是為了樂趣而寫的文章。