javascript - Vue js从父函数执行子函数并获取数据

Question

我正在构建一个步骤表单，我想执行验证并从我的子组件中获取数据。

所以我有一个步骤形式，它分为容器(父)和步骤1(子)

child 有表单数据

在我的 child

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

如何在子组件中执行函数并从父组件中检索数据。

母公司结构更新

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