VUE：通信、サブアセンブリコンポーネント間の親コンポーネントサブアセンブリ検証メソッドを呼び出すサンズ形

参考：

ElementUIは、サブアセンブリのキャリブレーション管理を複数形成：https://www.jianshu.com/p/541d8b18cf95

Vueの子コンポーネントは、親コンポーネントのメソッドを呼び出します。https://juejin.im/post/5c1370365188250f73759a79

サンズコンポーネントクラスのデータ転送Vueのフォーム：https://juejin.im/entry/5ae32bc75188256717760b13

Vueの公式文書：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D

ヴィー・検証親要素のサブアセンブリは、検証結果を取得形成：https://www.jianshu.com/p/cebbb08356e8

：どのように親コンポーネントvue.jsトリガサブコンポーネントへの方法https://www.cnblogs.com/mophy/p/8590291.html

フォーム中の成分も、フォームは、別個のアセンブリを形成する必要性を抽出し、その後、親コンポーネントから参照するとき

親は、データ転送の間に親子アセンブリを含む方法サブアセンブリコンポーネント形で検証する必要があり、各成分サンズを呼び出す、請求

フォーム検証のメソッドは、私は主にサブアセンブリの形で小切手を書く、サブアセンブリは、親アセンブリでの検証メソッドを呼び出します

データフォームフォームは小道具内のプロパティは、双方向結合は、双方向の結合を必要とする、あなたが使用する必要があるため .sync 修飾子を、参考資料：https://cn.vuejs.org/v2/guide/components-custom -events.html＃イベント名

親コンポーネント：

ダイアログポップ一部：

    < EL-ダイアログ
       V-dialogDrag 
      ：クローズ・オンクリックモーダル= "false"の
      幅= "500pxなど" 
      タイトル= "新增生产基地信息" 
      ：visible.sync = "dialogFormAddNew" 
      ：ロックスクロール= "true"を
      センター
      @close = "cleanAddNew" 
    > 
      < AddNewのREF = "AddNewの" @fetchData = "fetchProductBase" @close = "closeAddNew" ：addnewData.sync = "fpojo" ：isEdit = "isEdit" > </ AddNewの> 
      <div スロット=「フッター」クラス= "ダイアログフッタ" > 
        < EL-ボタン@click = "closeAddNew" >取消</ EL-ボタン> 
        < EL-ボタン@close = "closeAddNew" タイプ= "一次" @click = "は、addData（）" >确定</ EL-ボタン> 
      </ DIV > 
    </ EL-ダイアログ>

< AddNewのREF = "AddNewの" @fetchData = "fetchProductBase" @close = "closeAddNew" ：addnewData.sync = "fpojo" ：isEdit = "isEdit" > </ AddNewの>

結合特性：

　　REF：フォーム名、使用するフォームの検証は、サブアセンブリは、親アセンブリ内のフォームの名前を形成します

　　isEdit：カスタムプロパティ、編集状態かどうかを判断するための

　　addnewData.sync：フォームフォームのプロパティ

バインディングのイベント：

　　なFetchData：データの更新

　　近く：ウィンドウを閉じます

方法：

    // 新しいデータを送信
    {は、addData（formNameフォーム）
       // 親コンポーネントはメソッドサブアセンブリ、新たなデータを確認し、送信呼び出し
      この;.）の$ refs.addnew.validataFormを（
    }

サブコンポーネント：

注：サブアセンブリでは：の<div> </ div>の存在でなければなりません

  < DIV > 
    < EL-形式
       ：ルール= "ルール" 
      REF = "addNewForm" 
      ラベル幅= "100pxに" 
      ラベル位置= "右" 
      ：モデル= "spojo" 
      センター
    > 
    .......... .................... 
    </ DIV >

エクスポートデフォルト{ 
  名： "アドオン新新" 、
  小道具：{ 
    addnewData：{ 
      タイプ：オブジェクト
    }、
    isEdit：{ 
      タイプ：ブール値、
      デフォルト：falseに
    } 
  }、
  データ（）{ 
    リターン{ 
      spojo：{ 
         ...... .............. 
      } // 新しいによって提出されたデータ
      の規則：{
         // 検証ルール
        たbaseName：
           // 必須：trueに必要 
          ：{必要trueに、メッセージ"ベース名を空にすることはできません「トリガー：」ぼかし」} 
        ]、
        baseArea：
          // 必須：真に必要な 
          {：必要trueに、 "ベース領域空にすることはできません"トリガ：メッセージが"ぼかし" } 
        ]、
        positionMessageは：
          // 必須：真に必要な 
          必要{：trueに、メッセージ： "位置情報が空にすることはできません"、トリガー： "ぼかし" } 
        ] 
      } 
    }; 
  }

方法:(フォーム検証）

  方法：{
     // サブアセンブリのチェックアウトフォーム
    validataForm（）{
       この参照文献$ [ "addNewForm"]検証（有効=>。。{
         IF （有効）{
           // 形成提出 
          はconsole.log（ "は、addData" ）; 
          コンソール。 （ログインこの.spojo）; 
          productionAreaMockApi.add（この .spojo）.then（レスポンス=> { 
            constのRESP = response.data;
             IF （resp.flagは）{
               // 成功追加し、データのリスト更新し
              、この $ EMITを（。 "なFetchData" ）;
               //偽this.dialogFormAddNew =; //が閉じます
              。この $ EMIT（ "閉じる" ;）
              はconsole.log（resp.flagに）
            } 他{
               // 失敗は、プロンプトが表示され
              、この。$メッセージ（{ 
                resp.message、：メッセージを
                タイプ： "警告" 
              }）; 
            } 
          }）; 
        } そう{
           リターン はfalse ; 
        } 
      }）; 
    } 
  }

VUE：通信、サブアセンブリコンポーネント間の親コンポーネントサブアセンブリ検証メソッドを呼び出すサンズ形

おすすめ