在 vue 中无需任何点击即可将数据从子组件传递到父组件

问题描述

我有一个父组件 ChangeInfo，里面有一个子组件 ShowWorkInfo。在 ShowWorkInfo 组件中，我有几个用于更新作业信息的输入表单。我创建了一个变量 work_info，它是一个对象，然后将 v-model 用于内部的字段。但是我不知道如何让父组件从子组件获取数据。我在子组件中没有任何按钮，我将尝试使用父组件中的按钮处理来自 WorkInfo 的数据。这是我的代码。我是否应该直接写入ChangeInfo而不将其拆分为子组件

ChangeInfo（父组件）

export default class ChangeInfo extends Vue {
  public isUpdated: boolean = false
  updateWorkInfo(workInfo: any) {
    if (
      workInfo.company == '' ||
      workInfo.department == '' ||
      workInfo.position == '' ||
      workInfo.postcode == '' ||
      workInfo.prefectures == '' ||
      workInfo.municipality == '' ||
      workInfo.address == '' ||
      workInfo.building == '' ||
      workInfo.phone_number == '' ||
      workInfo.url == ''
    ) {
      alert('完全な情報を入力してください')
      this.isUpdated = false
    } else {
      axios
        .put('https://609b82962b549f00176e394f.mockapi.io/work_info/1',{
          status: workInfo.status,company: workInfo.company,department: workInfo.department,position: workInfo.position,postcode: workInfo.postcode,prefectures: workInfo.prefectures,municipality: workInfo.municipality,address: workInfo.address,building: workInfo.building,phone_number: workInfo.phone_number,url: workInfo.url
        })
        .then(response => {
          workInfo = response.data
          console.log(workInfo)
          InformationModule.CHANGE_WORK_INFO(workInfo)
        })
        .catch(error => console.log(error))
      this.isUpdated = false
      workInfo.status = false
      workInfo.company = ''
      workInfo.department = ''
      workInfo.position = ''
      workInfo.postcode = ''
      workInfo.prefectures = ''
      workInfo.municipality = ''
      workInfo.address = ''
      workInfo.building = ''
      workInfo.phone_number = ''
      workInfo.url = ''
    }
  }

  updatePersonalInfo(personalInfo: any) {
    if (
      personalInfo.nearest_station == '' ||
      personalInfo.postcode == '' ||
      personalInfo.prefectures == '' ||
      personalInfo.municipality == '' ||
      personalInfo.address == '' ||
      personalInfo.building == '' ||
      personalInfo.phone_number == '' ||
      personalInfo.url == ''
    ) {
      alert('完全な情報を入力してください')
      this.isUpdated = false
    } else {
      axios
        .put('https://609b82962b549f00176e394f.mockapi.io/personal_info/1',{
          gender: personalInfo.gender,nearest_station: personalInfo.nearest_station,postcode: personalInfo.postcode,prefectures: personalInfo.prefectures,municipality: personalInfo.municipality,address: personalInfo.address,building: personalInfo.building,phone_number: personalInfo.phone_number,url: personalInfo.url
        })
        .then(response => {
          personalInfo = response.data
          console.log(personalInfo)
          InformationModule.CHANGE_PERSONAL_INFO(personalInfo)
        })
        .catch(error => console.log(error))
      this.isUpdated = false
      personalInfo.gender = false
      personalInfo.nearest_station
      personalInfo.postcode = ''
      personalInfo.prefectures = ''
      personalInfo.municipality = ''
      personalInfo.address = ''
      personalInfo.building = ''
      personalInfo.phone_number = ''
      personalInfo.url = ''
    }
  }

  triggerSubmit() {
    this.isUpdated = true
  }

我这样调用两个函数

<template>
  <div class="d-block">
    <ShowProfile />
    <ShowWorkInfo :isUpdated="isUpdated" @update-work-info="updateWorkInfo" />
    <ShowPersonalInfo
      :isUpdated="isUpdated"
      @update-personal-info="updatePersonalInfo"
    />
    <div class="w--27 mw-100 mx-auto my-9">
      <button
        @click="triggerSubmit"
        v-b-modal="'update-success'"
        class="btn btn-primary w-100"
      >
        {{ $t('common.btn.btn_update') }}
      </button>
    </div>
    <ModalUpdateSuccess />
  </div>
</template>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）