Vue.js Vue vuetify对话框如何在不单击的情况下跳转对话框组件

如何从主文件跳转对话框？我不知道如何将确认对话框值“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>

打开对话框
使用谷歌的定位服务？
让谷歌帮助应用程序确定位置。这意味着向谷歌发送匿名位置数据，即使没有应用程序在运行。
不同意
同意
导出默认值{
数据（）{
返回{
对话框：false
}
}
}

主文件：

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

从“../confirmationDialog”导入确认对话框
导出默认值{
数据（）{
返回{}
},
组成部分：{
确认对话框
},
方法：{
更新（）{
//待办事项：跳跳虎
}
},
}

将名为

show

的道具添加到子组件（

确认对话框

）并绑定到父属性：

确认对话框

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

。。。
导出默认值{
道具：['show']，
数据（）{
返回{
对话框：false
}
},
安装的（）{
this.dialog=this.show；
}
}

Main

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

从“../confirmationDialog”导入确认对话框
导出默认值{
数据（）{
返回{
showDialog:false，
}
},
组成部分：{
确认对话框
},
方法：{
更新（）{
this.showDialog=true；
}
},
}