【发布时间】：2020-05-17 03:29:45
【问题描述】：
我有 vuetify 应用程序，并在单击中打开一个对话框。在对话框中我有Foo 组件。
当我关闭对话框时，Foo 组件上的 destroy 事件不会触发。
如何在Foo组件中触发destory？我可以通过 vuetify 的方式来做吗？
const Foo = {
template: `
<div>im fooo!!! <v-text-field :value="bar"></v-text-field></div>
`,
data () {
return {
bar: '',
}
},
mounted: function() {
console.log('mounted')
},
destroyed() {
console.log('destroyed');
}
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {
Foo
},
methods: {
open: function() {
this.dialog = true;
}
},
data () {
return {
dialog: false,
}
},
})<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.8/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
>
<Foo />
</v-dialog>
<v-btn @click="open" color="red lighten-2" dark>
Click Me
</v-btn>
</div>
</v-app>
</div>【问题讨论】：
-
挂载的火吗？在打开对话框之前？我想该组件在打开页面时已经安装。这意味着 v-dialog 内部不使用
v-if，但更可能使用v-show，这意味着该对话框已添加到 dom 但未显示。在这种情况下，我认为最简单的解决方案是手动添加条件渲染，通过<Foo v-if="dialog" /> -
是的，mounted 在开始时被触发一次。当我关闭时，我希望从内存中删除组件，但没有发生。
-
我想它没有被销毁，因为父对话框组件没有被销毁，它只是被隐藏了，这意味着该组件（及其子组件）仍然存在。
-
你可以试试
<v-dialog v-if="dialog" :value="true" @input="dialog = false">
标签： javascript vue.js vuetify.js