0

我有一个父组件 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>
4

2 回答 2

2

嗯......有多种方法可以做到这一点：

  1. common.btn.btn_update又快又脏：将另一个prop从父组件传递给组件，按下时this将设置为true ，在updateWorkInfo 函数中，您为该prop在子组件中设置了一个观察者，当此pro更改为true时，您做一个emit('submitted', data)，这会将数据发送到您的父组件，然后在父组件中将此事件作为提交事件处理。在行动：

//#region Parent script
import {
  Component,
  Vue
} from 'vue-property-decorator'
import ShowWorkInfo from './Components/ShowWorkInfo.vue'
import ModalUpdateSuccess from '@/components/Modal/ModalUpdateSuccess.vue'

@Component({
  components: {
    ShowWorkInfo,
    ModalUpdateSuccess
  }
})
export default class ChangeInfo extends Vue {
  private isFormSubmitted: boolean = false;
  private validationMessage: string = '';
  updateWorkInfo(workInfo) {
    console.log('recieved workinfo: ', workInfo);
    const { isFormValid, validationMessage } = await validateForm(workInfo);// function that validates your data, and returns a message and a boolean.
    if(!isFormValid) { //if form is not valid, you have to set the variable that triggers 
                       //the submit to false so the child component can set  it to true and trigger submit once again
      this.isFormSubmitted = false;
      this.validationMessage = validationMessage;
      return;
    } 
    //...data handling logic and stuff... you can make the PUT request here, or anuy other data related action
  }
  triggerSubmit() {
    //this triggers the watch in the child component
    this.isFormSubmitted = true;
  }
}
//# endRegion Parent script

//# region Child script
@Component({
  components: {
    Title
  }
  //the prop
  props: {
    isFormSubmitted: {
      default: false,
      type: boolean,
    },
  }
})
export default class ShowWorkInfo extends Vue {
  private showWorkInfo: boolean = false
  private workInfo: any = { ...
  }
  //watch for change (you can also put it in a computed if it does not trigger change)
  watch: {
    isFormSubmitted: function(newValue) {
      if (newValue) {
        console.log('form-submitted', this.workInfo)
        emit('form-submitted', this.workInfo);
      }
    }
  }
}
//#endRegion Child script

现在我不太喜欢这种方法......但它确实有效，就像你想要的那样！

  1. 传统上：您将在子组件中有提交按钮并发出一个提交的事件，连同数据，更好，更可重用的方法：

#region Parent script
@Component({
  components: {
    ShowWorkInfo,
    ModalUpdateSuccess
  }
})
export default class ChangeInfo extends Vue {
  updateWorkInfo(workInfo) {
    console.log('recieved workinfo: ', workInfo);
    //...data handling logic and stuf...
  }
}


ShowWorkInfo (child component)
#endRegion Parent script

#region Child script
@Component({
  components: {
    Title
  }
})
export default class ShowWorkInfo extends Vue {
  private showWorkInfo: boolean = false
  private workInfo: any = { ... }
  //watch for change (you can also put it in a computed if it does not trigger change)
  submitForm() {
    console.log('submit form: ', this.workInfo);
    //you could also validate the form at this point and dont emit unti the data is valid
    this.$emit('form-submitted', this.workInfo);
  }
}
#endRegion Child script
<!-- parent template -->
<template>
  <div class="d-block">
    <ShowWorkInfo @form-submitted="updateWorkInfo"/>
    <ModalUpdateSuccess />
  </div>
</template>
<!-- parent template end -->

<!-- child template -->
<template>
  <div class="form">
  <!-- your form fields -->
   <div class="w--27 mw-100 mx-auto my-9">
      <button
        @click="submitForm"
        v-b-modal="'update-success'"
        class="btn btn-primary w-100"
      >
        {{ $t('common.btn.btn_update') }}
      </button>
    </div>
  </div>
</template>
<!-- child template end -->

注意1：如果我滥用了这些变量和this，我深表歉意，因为我不熟悉这个版本的Vue和打字稿，而且我已经有一年没有接触过vue.2了，但概念保持不变，基本上我只是想要为了向您展示如何使用 vue 提供的功能的方法，上面的代码远非完美，但我认为它说明了您的问题的用途和答案。

注意2：还有更多方法可以做到这一点，如果您对它们感兴趣，请告诉我。以上两种方式是我见过的最常见的

更新：第一个块中的表单验证。试试看，这是一个整体的表单验证。免责声明：如果您想逐个字段进行验证，那将非常困难，并且建议您将提交逻辑移动到您的子组件。

于 2021-07-01T10:53:36.313 回答
0

正如我所说，这可能不是最佳做法。我的想法是，如果您没有按钮并且我们想将信息发送到我们的父组件，我们可以使用带有惰性的 watch 和 v-model。

这是一个小例子，与您的代码无关。

子组件：


<template>
  <div class="hello">
    <input type="text" placeholder="Enter something" v-model.lazy="myObj.message">
    <input type="text" placeholder="Enter something" v-model.lazy="myObj.name"> 
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data () {
    return {
      myObj : {
        message:"",
        name : ""
      }
    }
  },
  watch: {
    myObj : {
      handler (newVal) {
      this.$emit('change', newVal)
    },
    deep: true
    }
  }
};
</script>

父组件：


<template>
  <div id="app">
    <HelloWorld @change="change"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
    change (obj) {
      console.log(obj)
    }
  }
};
</script>

单击外部输入后，控制台将记录您的消息。如果我们不使用 v.model.lazy ，那么每当输入更改时，它都会发送这样的数据。您可以尝试一下，看看它是否会起作用。

编辑：我添加了 deep:true 来观看整个对象。现在在父组件中，您实际上可以 console.log(obj.name) 或 (obj.message)

于 2021-07-01T10:58:17.713 回答