在父对象上打开Vue对话框(模态)

Question

首先，我已经读过这篇文章，但它对我没有帮助(或者我无法解决(

我有一个组件，它是Vuetify Modal(ModalTurno.vue(。我正试图从底部导航(bottomNav.Vue((也是一个组件(中的按钮打开它。

我甚至能做到！但它在底部导航div上打开。所以我想在我的主vue(Turno.vue(上打开这个，这样我就可以看到整个模态了。这让我抓狂

Vuetify Modal(ModalTurno.Vue(：

<template>
<v-dialog v-model="dialog" persistent max-width="500px" >
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
</v-card>
</v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
})
}
</script>

底部导航(bottomNav.Vue((按钮所在位置(：

<template>
<v-card height="200px" flat>
<v-bottom-nav
:value="true"
color="indigo"
fixed
>
<v-btn
dark
flat
value="favorites">
<span>Agregar turno</span>
<v-icon>add_circle</v-icon>
</v-btn> <!--THIS IS THE BUTTON TO OPEN THE DIALOG -->
</v-bottom-nav>
</v-card>
</template>
<script>
export default {
name: 'header',
data () {
return {
bottomNav: 'recent'
}
}
}
</script>

Turno.Vue(应显示模态的位置(：

<template>
<div>
<bottomNav> </bottomNav>
<modalTurno>  </modalTurno>
</div>
</template>
<script>
import bottomNav from "./components/bottomNav.vue";
import modalTurno from "./components/ModalTurno.vue";
export default {
name: 'turno',
components: {
bottomNav,
modalTurno 
}
}
</script>

感谢所有利用自己的时间阅读这篇文章的人！

Answer 1

您可以通过以下方式完成：

Turno.vue

• 添加ref＝"；modalTurno"；to(使此组件可通过此访问。$refs.modalTurno-访问子组件实例和子元素(

bottomNav.Vue

• 添加@click="家长$refs.modalTurno.dialog＝true"；到v-btn(这将更新modalTurno中的对话框(