在一个vue页面引用另一个vue页面

Question

我在一个A.vue页面中引入了另一个B.vue页面，现在单击A中方法想要调B中的方法（有表单）
这是A的表单
<el-form :model="dialogForm.data">

      <el-row>
        <el-input type="hidden" v-model="dialogForm.data.id" placeholder="ID" auto-complete="off"></el-input>
        <el-col :span="14">
          <el-form-item label="工单名称:" :label-width="dialogForm.formLabelWidth">
            <el-input v-model="dialogForm.data.name" placeholder="姓名" auto-complete="off"></el-input>

          </el-form-item>
        </el-col>
        <leave></leave>
        <el-button-group style="float: right">
          <el-button @click="dialogForm.show = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit(dialogForm.data)">启  动</el-button>
        </el-button-group>
      </el-row>
    </el-form>
    引入B
    import leave from '../formdesign/leave'
    
   A中 / 处理表单提交
handleSubmit(formData) {
  this.leaveHandleSubmit(leave.leaveDialog.formData)
  **这里不知道怎么传定义在B中的leave.leaveDialog.formData**
  
  
    ajaxWork.startWork(formData)
      .then(rs => {
        this.dialogForm.show = false
        this.$message({
          message: '启动工单成功',
          type: 'success'
        })
      })
      .catch(error => {
         this.$err(error.msg);
      })
}
   

Answer 1

给组建B设置ref

<leave ref="componentB"></leave>

然后在click方法里调用

// 通过$refsk可以获取组建B的方法、属性
this.$refs.componentB.leaveDialog**