如何从主文件触发该对话框?我不知道如何tigg 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>
show
在子组件(confirmationDialog
)中添加一个称为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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句