親から子関数を実行してデータを取得する

Question

私はステップフォームを作成していました。子コンポーネントから検証を行い、データを取得したいと思います。

ので、私は子供が私が

<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 

     } 

     } 
    ) 

    } 


} 

を持っている子でフォームデータを

を持っているコンテナ（親）とSTEP1（子）

に分けアイブ階段状を持っています

親の中

<script> 
    methods:{ 

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


    } 



    } 

</script> 

子コンポーネントで関数を実行し、親コンポーネントのデータを取得するにはどうすればよいですか。

親構造ON UPDATE

<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>