Vue vuetify Dialog如何在不点击的情况下触发对话框组件答案

【问题标题】：Vue vuetify Dialog How to tigger dialog component without clickVue vuetify Dialog如何在不点击的情况下触发对话框组件
【发布时间】：2021-06-12 10:37:38
【问题描述】：

如何从主文件触发对话框？我不知道如何将 ConfirmationDialog 值“dislog”设置为 true。或者任何其他方法来做到这一点？不想将代码分组为一个文件。

那是一个叫ConfirmationDialog.vue的组件

<template>
    <v-layout row justify-center>
        <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
        <v-dialog v-model="dialog" max-width="290">
            <v-card>
                <v-card-title class="headline">Use Google's location service?</v-card-title>
                <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="green darken-1"
                        flat="flat"
                        @click.native="dialog = false"
                    >Disagree</v-btn>
                    <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>
<script>
export default {
    data() {
        return {
            dialog: false
        }
    }
}
</script>

主文件：

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {}
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            // Todo: Tigger Confirmation Dislog
        }
    },
}
</script>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

向子组件 (confirmationDialog ) 添加一个名为 show 的 prop 并绑定到父属性：

确认对话框

...
<script>
export default {
  props:['show'], 
 data() {
        return {
            dialog: false
        }
    },
mounted(){
   this.dialog=this.show;
}
}
</script>

主要

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog :show="showDialog"></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {
           showDialog:false,
        }
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            this.showDialog=true;
        }
    },
}
</script>

【讨论】：