道具值沒有在vue中將更新的值從父組件發送到子組件

Question

我有一個父子組件。 我在這里面臨的問題是，當我第一次單擊子組件中的提交按鈕時，我作為道具從父級發送到子級的驗證字段沒有得到更新。 例如，當我在子組件上提交表單時，它會使用父組件中的 checkValidation 方法檢查表單驗證。 假設表單驗證在提交時為真，但在控制台中 this.validation 在子組件中仍然顯示為假，當我再次單擊提交時，在控制台中 this.validation 返回真。 因此 this.validation 值在單擊提交按鈕時第二次更改。 請幫我解決這個問題

父組件

<template>  
  <UserDetails
      ref="user_details"
      :validation="validation"
      @checkValidation="checkValidation"
      />                  
</template>

<script>
  import UserDetails from 'views/my_account/users/edit.vue';

  export default {
    components: {
      UserDetails,
    },
    data: function () {
      return {        
        validation: false
      }
    },
    methods: {
      checkValidation() {
        var valid = false;
        var that = this;
        valid = this.$refs["user_details"].$refs.userForm.validate()
        this.validation = valid
      },
    }
  };
</script>

子組件

<template>
  <div>
    <v-form :model='user' ref='userForm'>
        <v-layout row wrap>
          <v-flex xs12 md6 class="add-col-padding-right">
            <v-text-field
              label='User Name'
              required
              v-model='user.name'>
            </v-text-field>
          </v-flex> 
        </v-layout>       
        <v-layout row wrap>
            <v-btn @click.prevent='submit'>Save</v-btn>
        </v-layout>
    </v-form>
  </div>
</template>

<script>

  export default {
  props: ['validation'],
  data: function () {
    return {
      user: {
        name: ''
      }
    };
  },
  
  methods: {    
    submit() {
      this.$emit('checkValidation');
      console.log(this.validation)
    },
  }
};
</script>

Answer 1

這應該可以解決問題

//child component
  submit() {
  this.$emit('checkValidation');
  this.$nextTick(()=>{console.log(this.validation)})
},

有關更多詳細信息，我推薦以下文章文檔

這篇文章應該回答你的大部分疑問

Answer 2

如果您的子組件有表單，為什么不對子組件進行驗證。 然后，您可以在表單有效時發出“已保存”事件，在父級中獲取該事件並執行您想要的操作，並且您知道此時子級有效？ 刪除所有這些參考點。