Vuetify 对话框设置从子级到父级的 prop 突变

Question

我目前正在使用它打开一个对话框组件

家长

<v-btn color="#EF5350" dark small absolute top right fab 
 @click="showDialog">

   <v-icon>zoom_in</v-icon>  

</v-btn>

<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />

<script>
  import UIDialog from '@/components/UI/UIDialog';
  export default {
    data() {
      return {
        dialog: false
      }
    }
    components: {
      UIDialog
    }, 
    methods: {
      showDialog() {
         this.dialog = true;
      }
    }
  }
</script>

这将打开对话框，因为我将对话框设置为true

孩子

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   watch: {
     dialog(val) {
       if (!val) this.$emit('updateDialog', false)
     }
   }
 }
</script>

我使用 watch 因为 vue 对话框没有事件。我设法关闭对话框，但我仍然得到

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

Answer 1

我设法通过使用计算属性来获取和设置对话框来解决我的问题

孩子

<v-dialog v-model="dialog" fullscreen scrollable>
  <v-card>
     This is a test
  </v-card>
</v-dialog>

<script>
 export default {
   props: {
     dialog: { type: Boolean, default: false }
   }, 
   computed: {
     dialogState: {
        get() { 
          return this.dialog;
        }, 
        set(val) {
          this.$emit('updateDialog', false);
        }
     }
   }
 }
</script>