Vue js從父項執行子項並獲取數據

Question

我正在構建一個步驟表單，我想從我的子項目組件執行驗證和提取數據。

所以我有一個步驟的形式，其香港專業教育學院分離成容器（父）和步驟1（子）

孩子有表單數據

在子我有

<template> 
    thre is the form fiedls 
</template> 
<script> 
data:()=>({ 
    orderform:{ 
     first_name:'', 
     lastname:'' 
    } 
    }), 

methods:{ 

submitOrder(){ 
    this.$validator.validateAll() 
    .then(
     (res)=>{ 
     if(res){ 
      //pass this.orderform to parent component 

     } 

     } 
    ) 

    } 


} 

現在在家長

<script> 
    methods:{ 

    gotonextStep(){ 
     //here execute submitOrder function in the child mcomponent 
     //am stuck 
     //also retrieve order form data here. 


    } 



    } 

</script> 

如何執行子組件中的函數並從父組件中檢索數據。

UPDATE ON母體結構

<stepper> 
<v-stepper-content step="1"> 
     <child-1></child-1> 
    <button @click.native="gotonextStep">Continue</v-btn> 
    </v-stepper-content> 
    ...other stepper steps 
</stepper> 

Answer 1

使用ref

<child-1 ref="child1"></child-1> 

然後在家長可以從孩子調用方法或獲取數據：

methods:{ 
    goToNextStep(){ 
    // call child method 
    let methodResult = this.$refs.child1.someChildMethod() 
    // access data properties in the child 
    let childData = this.$refs.child1.someChildDataProperty 
    } 
} 

Answer 2

子組件

submitOrder(){ 
    var that = this; 
    this.$validator.validateAll() 
    .then(
     (res)=>{ 
     if(res){ 
      //pass this.orderform to parent component 
      that.emit('childValidated',this.orderform); 

     } 

     } 
    ) 

    } 

父組件

<child-component-name @childValidated="gotonextStep"></child-component-name> 

種方法：{

gotonextStep(dataFromChild){ 
    //here execute submitOrder function 
    //am stuck 
    //also retrieve order form data here. 
} 
} </script>