vue: communication, call the parent component subassembly verification methods between the subassembly components Sons form

reference:

ElementUI forms a plurality of subassemblies Calibration Management: https://www.jianshu.com/p/541d8b18cf95

Vue child component calls the parent component Methods: https://juejin.im/post/5c1370365188250f73759a79

Sons component class data transfer Vue Form: https://juejin.im/entry/5ae32bc75188256717760b13

Vue official document: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D

Vee-validate parent element subassembly forms the verification results acquired: https://www.jianshu.com/p/cebbb08356e8

The method of how to parent component vue.js trigger subcomponents: https://www.cnblogs.com/mophy/p/8590291.html

---

 

When a component in a form too, form Extract the need to form a separate assembly, and then referenced from parent components

Wherein the parent needs to be verified in a sub-assembly component form, which method involves a parent-child assembly between the data transfer, and call each component Sons

Methods in form validation, I mainly write the check in the form of sub-assemblies, subassemblies call verification method in the parent assembly

Due to data form form requires two-way binding, that property within the props two-way binding, you need to use  .sync modifiers, reference documentation: https://cn.vuejs.org/v2/guide/components-custom -events.html # event name

Parent component:

dialog pop part:

    <el-dialog
      v-dialogDrag
      : use Close-ON-the Click-Modal = "false" 
      width = "500px" 
      title = "new production base information" 
      : visible.sync = "dialogFormAddNew" 
      : the Scroll-Lock = "to true"
      center
      @close="cleanAddNew"
    >
      <add-new ref="addnew" @fetchData="fetchProductBase" @close="closeAddNew" :addnewData.sync="fpojo" :isEdit="isEdit"></add-new>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddNew">取 消</el-button>
        <el-button @close="closeAddNew" type="primary" @click="addData()">确 定</el-button>
      </div>
    </el-dialog>

<add-new ref="addnew" @fetchData="fetchProductBase" @close="closeAddNew" :addnewData.sync="fpojo" :isEdit="isEdit"></add-new>

Binding properties:

　　ref: form name, form validation when to use, sub-assemblies form the name of the form in the parent assembly

　　isEdit: custom properties, for determining whether the edit state

　　addnewData.sync: form form's properties

Binding events:

　　fetchData: Refresh Data

　　close: Close Window

method:

    // submit new data 
    the addData (formName) {
       // parent component invokes the verify method subassembly, the new data and submit 
      the this $ refs.addnew.validataForm ().;
    },

---

Subassembly:

Note: In subassemblies: <div> </ div> must be present 

  <div>
    <el-form
      :rules="rules"
      ref="addNewForm"
      label-width="100px"
      label-position="right"
      :model="spojo"
      center
    >
    ..............................
    </div>

export default {
  name: "add-new",
  props: {
    addnewData: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      spojo {
         ....................
      } // data submitted by the new 
      rules: {
         // validation rules 
        baseName: [
           // required: Required to true 
          {required: to true , the Message: "base name can not be empty", the Trigger: "Blur" }
        ],
        baseArea: [
          // required: Required to true 
          {required: to true , the Message: "base area can not be empty", the Trigger: "Blur" }
        ],
        positionMessage: [
          // required: Required to true 
          {required: to true , Message: "location information can not be empty", Trigger: "Blur" }
        ]
      }
    };
  },        

methods :( form validation)

  Methods: {
     // subassembly checkout forms 
    validataForm () {
       the this . refs $ [ "addNewForm"] the validate (Valid =>. {
         IF (Valid) {
           // Submit form 
          the console.log ( "the addData" );
          console.log(this.spojo);
          productionAreaMockApi.add(this.spojo).then(response => {
            RESP const = response.data;
             IF (resp.flag) {
               // add successful, refresh the list of data 
              the this $ EMIT ( "fetchData." );
               // this.dialogFormAddNew = false; // Close 
              the this $ EMIT (. "use Close" );
              console.log(resp.flag)
            } The else {
               // failure, prompted 
              the this . $ The Message ({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }