道具值在孩子身上没有变化答案

【问题标题】：Prop value not changing in child道具值在孩子身上没有变化
【发布时间】：2020-07-17 22:18:49
【问题描述】：

我创建了一个错误组件，当我从服务器收到错误时，我会在对话框中显示该组件。我将在父组件中收到的错误消息通过 props 传递给错误组件。当我第一次通过将 v-model="errorDialog" 设置为 true 来显示错误组件时，我看到了正确的错误。当我尝试使用我的错误组件再次显示对话框时，我不断收到与我第一次显示它时相同的错误消息（{{errMsg}}）。即使 errMsg 的值不同：err="errMsg"。有什么帮助吗？

错误组件。

<template>
     <v-card>
  <v-card-title class="headline red lighten-2" >
  Oh No 
  </v-card-title>
   <v-card-text>

         <b> {{errMsg}} </b>
   </v-card-text>

     <v-card-actions>
          <v-spacer></v-spacer>

            <v-btn color="#9da4cf" text @click="cancel">Ok</v-btn>

        </v-card-actions>

  </v-card>
</template>


<script>
export default {

    data(){

        return {

            errMsg:this.err
        }
    },

    props:{

        err:{
        type: String,
      required: true,

        }
    },

    methods:{

 cancel(){


       this.$emit('cancel-ErrorDialog');



      }

    }

}
</script>

来自父组件

 <v-dialog v-model="errorDialog" max-width="600px">
      <ErrorDialog :err="errMsg" v-on:cancel-ErrorDialog="cancelErrorDialog" />
    </v-dialog>

【问题讨论】：

标签： javascript vue.js vue-component vuex vuetify.js

【解决方案1】：

首次创建组件时，该值被复制到本地数据对象中，但从未更新。看起来您可以完全跳过 data 对象并直接使用该道具：

<template>
     <v-card>
  <v-card-title class="headline red lighten-2" >
  Oh No 
  </v-card-title>
   <v-card-text>

         <b> {{err}} </b>
   </v-card-text>

     <v-card-actions>
          <v-spacer></v-spacer>

            <v-btn color="#9da4cf" text @click="cancel">Ok</v-btn>

        </v-card-actions>

  </v-card>
</template>


<script>
export default {

    props:{
      err:{
        type: String,
        required: true,
      }
    },

    methods:{
      cancel(){
        this.$emit('cancel-ErrorDialog');
      }
    }

}
</script>

【讨论】：