vue vuetify Dialog 如何不点击触发对话框组件

Question

如何从主文件触发对话框？我不知道如何将 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>

Answer 1

将名为 show 的道具添加到子组件 (confirmationDialog ) 并绑定到父组件属性 :

确认对话框

...
<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>

vue vuetify Dialog 如何不点击触发对话框组件

Vue vuetify Dialog How to tigger dialog component without click

vue.js

vuetify.js