Vue.js 自定义对话框组件Vuetify

我正在尝试基于vuetify框架中的v-dialog创建自定义对话框组件

<template>
    <v-dialog
      v-model="localDialog"
      max-width="290"
    >
      <v-card
      :color="localColor"
      >
        <v-card-title style="color:white;;" ><v-icon class="pr-2" color="white">{{localIcon}}</v-icon> {{localTitle}}</v-card-title>
        <v-card-text style="color:white; padding-top:5px;">
          {{message}}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="white"
            text
            @click="localDialog = false"
          >
            OK
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>
<script>
export default {
    mounted(){
      this.initDialog();
    },
    props:[
      'type','message','dialog'
    ],
    data () {
      return {
        localDialog:this.dialog,
        localTitle:'Response',
        localColor:'red',
        localIcon:'mdi-alert-circle-outline'
      }
    },
    methods:{
      "initDialog": function () { console.log(this.dialog);
        switch (this.type) {
          case 'success':
            this.localIcon = "mdi-check-circle";
            this.localColor ="green";
            this.localTitle ="Operation Successful";
            break;
          case 'info':
            this.localIcon = "mdi-check-circle";
            this.localColor ="orange";
            this.localTitle ="Information";
             break;
          case 'error':
            this.localIcon = "mdi-alert-outline";
            this.localColor ="red";
            this.localTitle ="Error Occurred";
             break;
          default:
            this.localIcon = "mdi-alert-circle-outline";
            this.localColor ="blue";
            this.localTitle ="Information";
             break;
        }
      },
    } 
}
</script>

---

我做错了什么

我认为问题在于数据使用传递属性的值作为初始值。之后对道具所做的任何更改都不会传递给数据，因此它遵循了data（）作为本地组件内存的概念，可以在本地操作，道具作为外部属性，技术上不属于该组件，并且不应该在子组件中发生变化

最简单的解决方案是为道具创建一个观察者，并更改道具更改的本地数据

watch: {
   dialog(val){
     this.localDialog = val
   }
}

编辑：

要将更改的道具传递给父级，请使用事件：

儿童：

<v-dialog @input="$emit('update:dialog', localDialog)">
...
</v-dialog>

...

家长：

<dialog-message-component 
    :type=resultDialogType
    :message=resultDialogMessage
    :dialog.sync="resultDialog" // The equivalent of :dialog="resultDialog" @update:dialog='resultDialog = $event'
/>

---

我认为问题在于数据使用传递属性的值作为初始值。之后对道具所做的任何更改都不会传递给数据，因此它遵循了data（）作为本地组件内存的概念，可以在本地操作，道具作为外部属性，技术上不属于该组件，并且不应该在子组件中发生变化

最简单的解决方案是为道具创建一个观察者，并更改道具更改的本地数据

watch: {
   dialog(val){
     this.localDialog = val
   }
}

编辑：

要将更改的道具传递给父级，请使用事件：

儿童：

<v-dialog @input="$emit('update:dialog', localDialog)">
...
</v-dialog>

...

家长：

<dialog-message-component 
    :type=resultDialogType
    :message=resultDialogMessage
    :dialog.sync="resultDialog" // The equivalent of :dialog="resultDialog" @update:dialog='resultDialog = $event'
/>

谢谢，我已将此标记为答案，但如何以两种方式进行绑定，即当我在对话框上单击“确定”并在子项中将值设置为false时，如何通知父项此更改？对不起，我现在是个傻瓜我知道我可以简单地绑定到孩子的“对话”，但是当我这么做的时候，我得到了“避免变异道具”错误避免双向绑定道具，因为它会直接变异道具。使用事件将更改的道具值发送回父级。查看更新的答案。更新的答案有效，但仅适用于第一个api请求。如果我关闭对话框并再次发出请求，对话框将不会再次出现。我将“$emit（'update:dialog'，localDialog）”放入closeDialog方法中，然后通知父对象，使其正常工作！感谢您的帮助谢谢，我已将此标记为答案，但如何以两种方式进行绑定，即当我在对话框上单击“确定”并在子项中将值设置为false时，如何通知父项此更改？对不起，我现在是个傻瓜我知道我可以简单地绑定到孩子的“对话”，但是当我这么做的时候，我得到了“避免变异道具”错误避免双向绑定道具，因为它会直接变异道具。使用事件将更改的道具值发送回父级。查看更新的答案。更新的答案有效，但仅适用于第一个api请求。如果我关闭对话框并再次发出请求，对话框将不会再次出现。我将“$emit（'update:dialog'，localDialog）”放入closeDialog方法中，然后通知父对象，使其正常工作！谢谢你的帮助